当文本输入具有焦点时，淡入正文背景

Fade body background when text input has focus

本文关键字：淡入 正文 背景 焦点 文本 输入      更新时间：2023-09-26

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

jquery，最好的方法是什么？

您可以使用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>

您可能需要根据页面上的各种元素更改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>

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

相关文章：