Question

我正在尝试将一个小脚本添加到html表单中。所有字段都默认为字符串＆＃39; pass＆＃39;。如果某个字段更改为“通过”字段以外的任何字段。文本字段应将其边框更改为红色轮廓。如果编辑了值，则更改回＆＃34;传递＆＃34;，它应该删除边框。

我的例子几乎正常。如果我更改了一个值，它会将框变为红色。但是，如果我选择另一个没有改变的字段，那么它也会勾选为红色框。如果我将值设置回＆＃34;传递＆＃34;它也不会改变。我正在为一个Rails应用程序工作，但我的JS技能非常糟糕。

我的表格和JS。

＆＃13;

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

＆＃13;

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

＆＃13;

如您所见，如果编辑默认文本，它将更改边框。但随后点击标签，它将勾勒出下一个框。当回到＆＃34;传递＆＃34;

时，它也无法改变

Answer 1

你应该使用这里记录的$（this）.val（） http://api.jquery.com/val/

而不是$（this）.value返回undefined，导致你看到的行为。

Answer 2

请使用.val()代替.value。请尝试以下代码。

$(document).ready(function(){
            $("input").keyup(function(){
                if ($(this).val() !== "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>

Answer 3

您的代码中存在一些问题。为了解决这个问题，我做了以下几点：

1-我使用.val()代替.value

2-我重新安排了代码，基本相同的逻辑，但顺序不同。它奏效了。对我来说，清理代码使它工作，我无法解释我改变了什么。

3-我把逻辑放在一个单独的函数中。

这是一个工作性的例子：

$(document).ready(function() {

  function borderchange($input) {
    console.log($input.val());
    let inputVal = $input.val();
    if (inputVal === "pass") {
      $input.css("border", "solid black 0px");

    } else {
      $input.css("border", "3px double red");
    }

  }
  $(".inputfield").keyup(function() {

    console.log($(this).val());
    borderchange($(this));

  })
})

<script src="https://code.jquery.com/jquery-3.1.0.js"></script>


<div class="field h4">
  <label for="inspection_results_soiled">Soiled:</label>
  <input class="inputfield" 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 class="inputfield" id="inspection_results_contaminated" type="text" name="inspection[results][contaminated]" value="pass"><br>
</div>

Answer 4

您可以使用pattern属性设置为"pass"和required属性来匹配CSS中的空字符串，:invalid和:valid伪类来设置{{ 1}}属性

border

:invalid {
  border: 3px double red;
}
:valid {
  border: none;
}

如果内容从默认值更改，则更改文本字段输入样式

4 个答案: