example

Question

example

似乎在<input type="number"/>中输入文字不会触发更改事件。我想要一个更改事件，以便我可以警告用户修改他们的输入。如何为此获取更改事件并获取当前值以便我可以验证错误输入？

我一直在使用Chrome进行测试。

$('input').on('change', function() {
    alert('change');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
put letters in me and press tab: <input type="number"/>

Answer 1

然后尝试使用其他键盘事件。例如，我刚刚添加了

$("input").on('keyup', function() {
    alert('keyup' + $(this).val());
})

在您的JSFiddle示例中，在alert文本框中按a后显示number。

注意：检查$(this).val()不会返回无效字符（至少在Chrome中）。它会在返回结果之前删除无效值（例如，1a变为空白）。这也是change事件由于输入全部无效而未实际更改其值时触发的原因。要捕获无效字符，您必须检查事件的keyCode：

$("input").on('keyup', function(e) {
    if (e.keyCode < 48 || e.keyCode > 57) {
        // not 0-9 (note: ignores -)
        alert('error!');
    }
});

在messing around a bit more之后，我注意到Chrome和IE10的行为类似，但IE10似乎有一个漏洞：

如果你使用非数字开始number输入，那么IE10（也可能是9）将认为输入的其余部分是有效数字，而不管后面跟着什么字符（例如{{1在IE的眼中，它与1a2一样有效。但是，在Chrome中，如果输入非数字，则会立即忽略输入并将其声明为无效;在IE10中，如果以非数字开头，那么行为是相同的。

行为的一个重大区别是IE10会在12之后清除无效的数字字段，但是，如果该字段以非数字开头（例如blur），它们再次认为它无效）。 a1可以在数字之前，但不能超过其中一个。

在这两种浏览器中，如果-被视为无效，则number（以及this.value）将返回空白。在IE10中，如果$(this).val()以数字（number）开头，则可以获得原始的无效值。两个浏览器只会在考虑输入实际发生变化时触发0-9个事件，并且 - 在IE10的情况下 - 表示用户输入change然后abcd输入，然后IE10将清除该字段并触发blur事件，如果它在更改之前具有有效值。在Chrome中，无论输入是否有效，都会发生更改;如果它无效，则将其更改为空白值。

这意味着您可以处理有效和无效的数字输入，但您无法可靠地获得用户在文本框中输入的实际值。

HTML

change

的JavaScript

put letters in me and press tab:
<br />
<input type="number"/>
<br />
<p id="event" />
<p id="text" />

您可以通过查看function checkValid(e) { var $this = $(this); $("#event").text(e.type); $("#text").html("this.value: " + this.value + "<br />$(this).val(): " + $this.val() + "<br />$(this).is(:valid): " + $this.is(":valid") + "<br />$.isNumeric(this.value): " + $.isNumeric(this.value)); // <- helps check } $('input[type="number"]').on('change', checkValid).on("keyup", checkValid);来查看是否有效号码。 $.isNumeric和:valid伪类在IE10中与:invalid不起作用，除非该字段标记为number（在IE9中根本没有），但它们都在Chrome未将其标记为required。

Answer 2

正如pickypg所述，如果用户在<input type='number'>元素中键入“ abcd ”，则无法通过{{1}获取值'abcd' }。（警告：我只在Chrome中测试过。）

但是，您可以通过调用$(this).val()或查看myDOMelement.checkValidity()对象的各个属性来确定HTML5输入有效性约束是否满足（有效）。这至少可以让您区分空白字段（有效）和包含' abcd '的字段（无效）。有关HTML5有效性的更多信息，请查看here。

至少在Chrome中，令人困惑的是，如果myDOMelement.validity元素最初为空，然后您输入“ abcd ”，则<input type='number'>事件为不在模糊时触发。同样，当您从字段中删除“ abcd ”时，该字段将变为空白。

解决方法是测试HTML5对模糊的有效性的变化。这是一个jsFiddle来说明这种技术。请注意，您仍无法判断用户是否已将“ abcd ”更改为“ efgh ”，因为这些都无效。

Answer 3

事件更改是在失去焦点时触发的，并且它按预期工作，您可能需要使用keyup。

<强> Live Demo

$('input').on('keyup', function() {
    alert('change');
});

将文本放入数字输入不会触发更改事件？

example

3 个答案: