Question

在将内容放入输入字段后，有什么方法可以添加背景颜色吗？就像自动完成工作时发生的情况一样。

谢谢！

Answer 1

有几种方法可以实现这一目标。您可以通过添加required attribute强制input。这样做意味着只要用户在字段中输入任何内容，它就会处于有效状态，您可以使用:valid pseudo-class在CSS中将其定位：

＆＃13;

input:valid{
  background:#ff9;
}

＆＃13;

<input required>

＆＃13;

或者，如果您不想强制使用该字段，而且正如其他人所建议的那样，您可以在字段获得焦点时设置新的background-color。为了防止它在失去焦点时恢复到其初始颜色，您需要向transition添加background，将transition-delay设置为{{1}时某个可笑的高数字处于正常状态并在聚焦时将其重置为input。但显然，无论用户是否实际在场中输入任何内容，都会发生这种变化。

＆＃13;

0s

＆＃13;

input{
  transition-delay:9999s;
  transition-property:background;
}
input:focus{
  background:#ff9;
  transition-delay:0s;
}

＆＃13;

如果这些选项都不符合您的需求，那么您可能需要使用JavaScript来添加或删除类，具体取决于<input>的{{1}}是否为空。< / p>

＆＃13;

value

＆＃13;

input

＆＃13;

document.querySelector("input").addEventListener("input",function(){
  this.value?this.classList.add("filled"):this.classList.remove("filled");
},0);

＆＃13;

Answer 2

<强> HTML

First name: <input type="text" name="firstname">

<强>的CSS

 input:focus {
        background-color: yellow;
    }

Demo in JsFiddle

Answer 3

使用 Jquery ，

$( "#target" ).blur(function() {
    $( "#target" ).css('background-color','red');
});

DEMO

Answer 4

这是一个纯javascript的解决方案

var input = document.getElementById("test");
input.addEventListener('input', function() {
  if (input.value)
    input.style.backgroundColor = '#90EE90';
  else
    input.style.backgroundColor = '#fff';
});

<input id="test" type="text" value="">

Answer 5

添加像

这样的Css类

.myCSSClass
{
background-color:red;
}

现在在模糊功能上使用jquery，你可以添加这个类

$("#myTextBox").on('blur',function(){
if($("#myTextBox").val()==""){
  if($("#myTextBox").hasClass("myCSSClass")){
    $("#myTextBox").removeClass("myCSSClass");
  }
}
else
{
$("#myTextBox").addClass("myCSSClass")
}
});

在输入字段中设置内容后添加背景颜色

5 个答案: