javascript - 如果内容更改为默认值，请更改文本字段输入样式

Question

我正在尝试向 html 表单添加一个小脚本。所有字段默认为字符串“pass”。如果字段更改为“通过”以外的任何内容，则文本字段应将其边框更改为红色轮廓。如果该值被编辑然后更改回“pass”，它应该删除边框。

我的例子几乎可以工作了。如果我更改一个值，该框就会变成红色。但是，如果我切换到另一个未更改的字段，它也会以红色勾勒出该框。如果我将值设置回“pass”，它也不会变回去。我正在为 Rails 应用程序开发这个项目，但我的 JS 技能非常糟糕。

我的表单和 JS。

    $(document).ready(function(){
        $("input").keyup(function(){
            if ($(this).value !== "pass") {
                $(this).css("border", "3px double red");
            }  else  {
                $(this).css("border", "0px");
            }
        })
    })

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="field h4">
  <label for="inspection_results_soiled">Soiled:</label>
  <input id="inspection_results_soiled" type="text" name="inspection[results][soiled]" value="pass"><br>
</div>
<div class="field h4">
  <label for="inspection_results_contaminated">Contaminated:</label>
  <input id="inspection_results_contaminated" type="text" name="inspection[results][contaminated]" value="pass"><br>
</div>

如您所见，如果您编辑默认文本，它会更改边框。但然后点击选项卡，它将勾勒出下一个框。当设置回“pass”时也无法更改回来

Answer 1

您应该使用 $(this).val() ，如此处所述 http://api.jquery.com/val/

而不是 $(this).value 返回未定义的结果，从而导致您所看到的行为。