在按键输入字段上重置背景不透明度

Question

当有人点击一个输入字段时，站点的背景会得到一个不透明的信息来强调输入字段。这很酷，但我只希望在输入字段上单击，而不是在输入字段中键入某些内容时。

因此，我想要实现的是，当有人在输入字段中输入(按下键)时，将不透明度重置为1。

这个是可能的吗？如果是的话，我应如何做到这一点？

HTML:

<div class="blur"> </div>
<input class="blurOnFocus">

CSS:

.blurry {
  opacity: 0.5;
}

JS:

function onFocus() {
    var blurElements = document.getElementsByClassName('blur');
    for (var i = 0, l = blurElements.length; i < l; i++) {
        blurElements[i].classList.add("blurry");
    }
}

function onFocusOut() {
    var blurElements = document.getElementsByClassName('blur');
    for (var i = 0, l = blurElements.length; i < l; i++) {
        blurElements[i].classList.remove("blurry");
    }
}

Answer 1

​

function changebg() { 
  var maindivclass = document.getElementById("maindiv").classList; 
 	maindivclass.remove("red"); 
    maindivclass.add("blue");
}

	.blue{background:blue;}
	.red{background: red;}

<ul>
	<li id="my_block1">		
		<span>some text 1</span>									
		<div class="form-group">
			<input id="input1" type="text" name="my_item_1" onkeypress="changebg()">
      <div class="red" id="maindiv">test</div>
		</div>
	</li>	
</ul>

​

Answer 2

您应该使用输入字段上的keydown事件来删除应用于focus的.blurry类。

​

function onFocus() {
    var blurElements = document.getElementsByClassName('blur');
    for (var i = 0, l = blurElements.length; i < l; i++) {
        blurElements[i].classList.add("blurry");
    }
}

function onKeydown() {
    var blurElements = document.getElementsByClassName('blur');
    for (var i = 0, l = blurElements.length; i < l; i++) {
        blurElements[i].classList.remove("blurry");
    }
}

var el = document.getElementsByClassName("blurOnFocus");
for(var i=0; i<el.length; i++) {
 el[i].addEventListener( 'focus', onFocus );
 el[i].addEventListener( 'keydown', onKeydown );
 el[i].addEventListener( 'blur', onKeydown );
}

.blurOnFocus {
margin: 30px;
}
.blur {
width: 200px;
height: 200px;
}

.blurry{
  background-color: #000;
  opacity: 0.5;
}

<div class="blur">
<input class="blurOnFocus" />
<input class="blurOnFocus" />
</div>

​

Answer 3

您需要使用onclick & onkeypress事件来检测条件；对于更改CSS类，最好使用setAttribute函数。

假设这是您的HTML片段：

<div id="myDiv" class="blur"> Lorem ipsum... </div>
<input type="text" name="myInp" id="myInp" />

下面的脚本可以满足您的需要：

document.getElementById('myInp').onclick = function () {
    document.getElementById('myDiv').setAttribute('class', 'blurry');
};
document.getElementById('myInp').onkeypress = function(){
    document.getElementById('myDiv').setAttribute('class', 'blur');
};

编辑:使用纯类和标记工作

var inputs = document.getElementsByTagName('input');
for (var j=0; j<inputs.length ; j++) {
    inputs[j].addEventListener('click', function () {
        var blurredItems = document.getElementsByClassName('blur');
        for (var i = 0; i < blurredItems.length; i++) {
            blurredItems[i].setAttribute('class', 'blurry');
        }
    });
    inputs[j].addEventListener('keypress', function () {
        var blurriedItems = document.getElementsByClassName('blurry');
        for (var i = 0; i < blurriedItems.length; i++) {
            blurriedItems[i].setAttribute('class', 'blur');
        }
    });
 }