在页面上自动切换模糊后，更改输入的背景颜色

Change backgroundcolour of input after onblur automatically across page

本文关键字：输入 颜色 背景 模糊      更新时间：2023-12-30

我希望输入字段在onblur之后更改背景颜色。自动用于每页上的所有字段。因此，我希望在标题中有一个脚本，它将自动影响所有输入字段。

这能做到吗？

谢谢！

window.onload = function(){
  Array.prototype.slice.call(document.getElementsByTagName('input')).forEach(function(element){
    element.addEventListener('blur',function(){
        //anything here. Notice that both this and element refer to each input element.
    })
  });
}

document.querySelectorAll或任何返回NodeList对象的函数都可以使用。

因为您是在"onblur"状态下启动的，所以您应该监听聚焦/点击事件，而不是模糊事件

添加css

input{ /*Blurred state*/
    background-color: red;
}
.onFocus input{ /*clicked state*/
    background-color: green;
}

添加一些javascript

$(input).
    click(function(e){
        body.className="onFocus";
    }).
    blur(function(){
        body.className="";
    });

当然可以。因为您没有尝试过，所以我选择假设您愿意支持最新/最新的浏览器（而不是所有传统浏览器）：

function colorOnBlur(){
    this.style.backgroundColor = '#f00';
}
var inputs = document.querySelectorAll('input');
for (var i = 0, len = inputs.length; i < len; i++){
    inputs[i].addEventListener('blur', colorOnBlur);
}

JS Fiddle演示。

或者，您可以向元素添加一个新的类名（而不是自己更改style对象：

function colorOnBlur(){
    this.classList.add('blurred');
}
var inputs = document.querySelectorAll('input');
for (var i = 0, len = inputs.length; i < len; i++){
    inputs[i].addEventListener('blur', colorOnBlur);
}

结合CSS：

input.blurred {
    background-color: #f00;
}

JS Fiddle演示。

显然，要根据自己的口味/要求调整相关的颜色。

参考文献：

  • CCD_ 2
  • classList
  • document.querySelectorAll()
相关文章：