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

当有人点击一个输入字段时，网站的背景会变得不透明，以强调输入字段。这很酷，但我只希望在单击输入字段时使用，而不是在输入字段中键入内容时使用

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

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

HTML:

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

.blurry {
  opacity: 0.5;
}

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

JS:

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

.blurry {
  opacity: 0.5;
}

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

函数onFocus（）{
var blurElements=document.getElementsByClassName（'blur'）；
对于（变量i=0，l=0.length；i

您应该使用输入字段上的

向下键

事件来删除应用于

焦点

的

模糊

类

函数onFocus（）{
var blurElements=document.getElementsByClassName（'blur'）；
对于（变量i=0，l=0.length；i函数changebg（）{
var maindivclass=document.getElementById（“maindiv”）.classList；
maindivclass.删除（“红色”）；
maindivclass.add（“蓝色”）；
}

.blue{背景：blue；}
.red{背景：red；}

一些文本1
测试

您需要使用

onclick

和

onkeypress

事件来检测条件；要更改CSS类，最好使用

setAttribute

函数

假设这是您的HTML代码段：

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

---

编辑：用于纯类和标记

var inputs=document.getElementsByTagName（'input'）；
对于（var j=0；j你的
.blur
类的不透明度是什么？它可能会被覆盖。blur类被.blury…所覆盖。blury变成了.blury，它的不透明度为0.5。我现在想要的是。只有当有人在输入字段中键入时，blury才会变为1…你将onfocus和onFocusOut绑定到什么事件？嗨，Lavish，谢谢你的回答。你能用我的代码举个例子让我接受你的答案吗？它不是工作人。它说：未捕获引用错误：onFocus未定义且未捕获语法错误：输入意外结束o：未捕获类型错误：无法读取null的属性“addEventListener”。谢谢。我可以看到它在你的代码段上工作，但对我来说它一直说：未捕获的TypeError:无法读取null的属性“addEventListener”。您认为问题可能是什么？可能是因为您使用的类。我使用的是
blurOnInput
类。我已经更新了两个输入。现在检查我亲爱的朋友，您是否尝试过我的代码？我正在模糊除输入字段外的整个背景…所以我不希望更改输入字段的背景，但希望更改其他元素的背景。请先尝试我的代码。我已使用类名添加了您想要的内容。谢谢，但仍然不是我要做的。我希望它与我的代码片段/示例一起使用，而不是一个全新的示例。无论如何，感谢您的努力。是的，但它使用ID！我不是我们ing ID的，因为我有多个输入字段。你能把它改成我的示例吗？我使用的是类。当然。在其中的哪一个上？你如何检测输入？你是说任何输入？请看我更新的帖子。我已经添加了输入字段HTML。我想把它也添加到我提供函数的任何输入字段中。所以没有ID，类。@Siyah更新。你需要下面只有一部分编辑了Nope man。根本不工作。未捕获引用错误：未定义聚焦。它甚至不再模糊。