如何“实时”检查输入内容

Question

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

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

到目前为止，这就是我的出发点……

HTML:

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

记者：

 $('#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');
}

我从这个先前提出的问题中借用了验证的基本原则： 检查输入中是否只输入了数值。 (jQuery)

任何帮助是极大的赞赏。

原文由 HisPowerLevelIsOver9000 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

当用户在字段内输入时，您可以使用 输入 事件来获取更改。在 change 事件中，您将获得与事件侦听器附加到的输入元素相对应的元素 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">

原文由 Jon Koops 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

您可以使用 onkeypress 事件 来执行此操作。每次用户在输入框被选中时按下一个键，更新输入的值。

例子：

 var input = document.getElementById("input-box");
var inputValue = document.getElementById("input-box").value;

input.addEventListener("keypress", function() {
  inputValue = document.getElementById("input-box").value;
  // do something with it
});

 <input id="input-box"/>

我希望我没有弄错任何东西。

原文由 user4490434 发布，翻译遵循 CC BY-SA 3.0 许可协议