Question

我有一个包含input元素的表单：

<form method="POST" action="User.do">
    <div id="buddy-form-group">

          <input type="text"
             class="form-control form-input-field form-interests-input-field" 
             name="interests" 
             onchange="checkFilled()">

     </div>

     <br/><br/><button class="btn btn-success" type="submit">Send</button>
</form>

我有一个脚本，它接收类form-interests-input-field的所有元素，并检查它们是否为空。如果为空，则将颜色设置为红色，否则设置为绿色：

function checkFilled()  {
    var interests = document.getElementsByClassName("form-interests-input-field");
    for (var i = 0; i<interests.length; i++)  {
        if (interests[i].value = "")  {
            interests[i].style.backgroundColor = "red";
        }
        else  {
            interests[i].style.backgroundColor = "green";
        }   

    }
}

问题是，如果至少有一个字段被获取，所有字段的颜色将变为绿色。一旦它们变为绿色，即使我擦除了所有输入，它也永远不会变为红色。我怀疑脚本将绿色属性放在类上，而不是单个元素上。修复它的最佳方法是什么？

Answer 1

类似以下的方法应该起作用：

<script>
    function checkFilled()  {
        var interests = document.getElementsByClassName("form-interests-input-field");
        for (var i = 0; i<interests.length; i++)  {
            if (interests[i].value == '')  {
                interests[i].style.backgroundColor = 'red';
            } else {
                interests[i].style.backgroundColor = 'green';
            }   
        }
    }
</script>

<form>
    <div id="buddy-form-group">

          <input type="text"
             class="form-control form-input-field form-interests-input-field" 
             name="interests" 
             onkeyup="checkFilled()">

     </div>

     <br/><br/>
     <button class="btn btn-success" onclick="checkFilled()" type="button">Send</button>
</form>

在=语句中将==更改为if。

通过添加onkeyup和onclick字段，它可以完成您想要的操作。当您单击按钮时，它将检查输入字段的值并相应地设置背景色。键入时，它还会设置输入字段的背景色。

更改输入字段的颜色（如果已填充）

1 个答案: