Question

我在表单中有一个简单的文本输入框。当输入框有焦点时，我希望正文背景覆盖它。

最好的方法是什么，jquery？

Answer 1

您可以使用CSS :focus选择器来执行此操作。

#overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #333;
  opacity: .5;
  display: none;
}
#text {
  z-index: 1000000;
  position: relative;
}
#text:focus ~  #overlay {
  display: block;
}

<input type="text" id="text">
<div id="overlay"></div>

Answer 2

您可能需要更改z-index，具体取决于您网页上的各种元素。

window.addEventListener('load', function() {
  var text = document.getElementById('text');
  var overlay = document.getElementById('overlay')
  text.onfocus = function() {
    overlay.style.display = 'block';
  };
  text.onblur = function() {
    overlay.style.display = 'none';
  };
});

#overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #333;
  opacity: .5;
  display: none;
}
#text {
  z-index: 1000000;
  position: relative;
}

<input type="text" id="text">
<div id="overlay"></div>

如果我能改进这个答案，请告诉我。

文本输入具有焦点时淡化身体背景

2 个答案: