Question

如何使用纯JS实现这一目标？我不允许使用jQuery或纯CSS解决方案，因此我能想到的唯一方法是纯JavaScript。

我有这个演示，例如： http://codepen.io/anon/pen/jBEMRK

HTML：

<body>

   <input type="text">

</body>

CSS：

body {
  background: red;
}

input {
  width: 50%;
}

我想要实现的是，当我点击输入字段时，我喜欢将输入字段聚焦并且背景(body)具有背景/淡入淡出/模糊（但是它被称为）。当然，优选具有一定的不透明度。

Answer 1

您可以执行以下操作。基本上，当文本框处于焦点时，您可以绝对定位div，然后为该div触发一些暗淡/模糊功能。

http://codepen.io/anon/pen/LWEbYG

<强> HTML

<body>

<input id="txtBox" onfocus="onFocus()" onfocusout="onFocusOut()" type="text">
  <div id="blur"></div> 
</body>

<强> CSS

body {
  background: red;
}

input {
  width: 50%;
}
.blury {
  position: absolute;
  height: 100%;
  width: 100%;
  background-color: black;
  top: 0;
  left: 0;
  opacity: 0.7;
  z-index: -1;
}

<强> JS

function onFocus() {
  document.getElementById('blur').setAttribute('class', 'blury');
}

function onFocusOut() {
  document.getElementById('blur').setAttribute('class', '');
}

Answer 2

您只需执行以下操作即可。

HTML部分：

<input type="text" onblur="blurIt(false)" onfocus="blurIt(true)">

JS部分：

function blurIt(val){
    if (val) document.body.style.background = "black";
    else document.body.style.background = "red";
}

Answer 3

如果您的意思是模糊，就像涂抹一样，您可以使用webkitfilter属性。

实施例

<强> HTML：

<input type="text" onfocus="blurBackground(true)" onblur="blurBackground(false)" />

<强> JS：

function blurBackground(doIt) { 
    if (doIt) document.body.style.webkitFilter = "blur(5px)";
    else document.body.style.webkitFilter = "blur(0)";
}

使用纯JS专注于输入字段时模糊背景

3 个答案:

实施例