javascript - 禁用页面内容

Question

我的搜索文本框位于标题中。在文本框中输入时，我想禁用页面的其余部分(标题除外)。该页面应该是灰色的。那里有两个单独的 div:header 和 main。主 div 包含几个子 div 来构建内容。

我怎样才能做到这一点？

Answer 1

@Thinker 解决方案很好(虽然我不确定使用 "text-indent": "-9999px" 是否是一个好习惯)。另一种选择是在您的主 div 上添加另一个 div 并使用不透明度设置来获得合适的结果。请记住，虽然作为主 div 的父级，但需要一个容器 div，请查看演示:

$("#text1").keydown(function() {
    $(".main").append('<div class="overlay"></div>');
});

.header {
    width: 100%;
    height: 50px;
    background-color: blue;
}

.main {
    width: 100%;
    height: 450px;
    background-color: red;
}
.container{
  position:relative;
}
.overlay{
  width:100%;
  height:100%;
  background-color:grey;
  position:absolute;
  top:0px;
  left:0px;
  opacity:0.8;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="header">
    <input type="text" id="text1">
</div>

<div class="container">
  <div class="main">Content that is going to hide when textbox is changed</div>
</div>