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

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

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

＆＃13;

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 );
}

＆＃13;

.blurOnFocus {
margin: 30px;
}
.blur {
width: 200px;
height: 200px;
}

.blurry{
  background-color: #000;
  opacity: 0.5;
}

＆＃13;

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

＆＃13;

Answer 3

你需要玩onclick＆amp; 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');
        }
    });
 }

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

3 个答案:

编辑：适用于纯粹的课程和标签