javascript - 如何查看 "real time"中输入的内容

Question

我正在处理一个 Web 表单，它设置了一个文本字段来接收预期的数值。如果此字段的内容不是数字，则表单不会提交，但没有放置错误消息让用户知道他们填写了此字段有误。

我的问题是……有没有一种方法可以实时检查输入内容并告诉用户他们没有正确填写？如果一切正常，我希望输入的边框为绿色，如果没有，则将边框设为红色并更改输入的默认文本以告诉他们我们只需要数字。

这就是我目前的出发点……

HTML:

<input type="text" class="btn-blue" id="testing"></input>

JS:

$('#testing').attr('placeholder', 'Enter Amount');
var useramount = $("#testing").val();
if (useramount.match(/^\d+$/)) {
   $("#testing").css({border: "2px solid #33CC00 !important"});
} 
else {
  $("#testing").css({border: "2px solid #FF0000 !important"});
  $("#testing").innerHTML = "";
  $('#testing').attr('placeholder', 'Only Numbers Please');
}

我从这个先前提出的问题中借用了验证的基本原则: Check If only numeric values were entered in input. (jQuery)

非常感谢任何帮助。

Answer 1

您可以使用 input当用户在字段内键入时获取更改的事件。在更改事件中，您将获得与事件监听器附加的输入元素相对应的元素 event.target .使用此引用，您可以通过使用元素上的 value 属性来获取输入的值。

检索到值后，您需要验证它实际上是数字。值得庆幸的是，jQuery 提供了一个名为 isNumeric 的方法。这使我们能够做到这一点。

一旦我们确定该值确实是数字这一事实，您就可以应用一个类或将样式设置为您想要的样式。确保您还检查该值是否已被清空，以免用户感到困惑。

至于验证消息——在用户与所述元素交互时设置输入的值不是一个好主意。相反，我选择添加文本元素来表示将根据验证状态有条件地显示的消息。

// Add error message element after input.
$('#some-number').after('<span class="error-message">Please enter numbers only!</span>')

$('#some-number').on('input', function (evt) {
  var value = evt.target.value
  
  if (value.length === 0) {
    evt.target.className = ''
    return
  }

  if ($.isNumeric(value)) {
    evt.target.className = 'valid'
  } else {
    evt.target.className = 'invalid'
  }
})

input {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  outline: none;
  border: 1px solid black;
}

input.valid {
  border: 1px solid green;
}

input.invalid {
  border: 1px solid red;
}

input.invalid + .error-message {
  display: initial;
}

.error-message {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="some-number">