如果键入文本，请更改输入边框颜色

Change input border color if text is typed

本文关键字：输入 边框 颜色 文本 如果      更新时间：2023-09-26

我认为问题的标题很好地解释了我的需求。例如，我的代码是

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

现在边框是红色的。如果我要在里面写文本，我需要把它变成黑色。谢谢

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

相关文章：