javascript - 重置按键输入字段的背景不透明度

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>