如果输入文字，更改输入边框颜色

-1

我认为我的问题的标题很好地解释了我需要的内容。例如我的代码是如果输入文字，更改输入边框颜色

<head> 
<style> 
input{ border: 5px solid red;} 
</style> 
</head> 
    <div class="in"> 
     <input class="input" type="text" name="text" method="post"> 
     </div>

现在边框是红色的。如果我在其中写入文字，我需要将其设为黑色。由于

来源

2016-04-28 davidxoma

请尝试总是添加到您的问题，显示从你身边努力解决您的最好的代码你自己的问题！缺点是通常你会得到你做错的评论，在我看来这是一个很好的学习方式。 –

var inputName = document.querySelectorAll("[name=text]")[0]; 
 

 
inputName.addEventListener("input", function(){ 
 
    var hasVal = this.value.trim().length > 0 
 
    this.style.border = "5px solid "+ (hasVal? "black" : "red"); 
 
});

input{ border: 5px solid red;}

<input class="input" type="text" name="text" method="post">

以上也将返回到红色，如果你删除任何价值。
如果你想保持它的黑色，无论比的值长度：

var inputName = document.querySelectorAll("[name=text]")[0]; 
 

 
inputName.addEventListener("input", function(){ 
 
    this.style.border = "5px solid #000"; 
 
});

input{ border: 5px solid red;}

<input class="input" type="text" name="text" method="post">

来源

2016-04-28 22:06:28

太棒了。非常感谢你<3 – davidxoma

@davidxoma：D不客气！ <3 –

如果输入文字，更改输入边框颜色

回答

相关问题