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

Question

例

似乎将文本输入<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!');
    }
});

在搞砸了一点之后，我注意到Chrome和IE10的行为类似，但IE10似乎在剥离中有一个错误：

如果启动number与非数字，那么IE10（可能是9和）输入将考虑投入的其余部分是一个有效的数字，无论什么字符跟随（例如， 1a2是一样一样有效12的眼睛IE）。 但是，在Chrome中，如果输入非数字，则会立即忽略输入并将其声明为无效; 在IE10中，如果以非数字开头，那么行为是相同的。

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

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

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

HTML

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

JavaScript的

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和:invalid伪类不IE10与工作number ，当作为字段被标记除了required （不是在所有在IE9），但他们在Chrome都工作不作为将其标记required 。

Answer 2

正如pickypg所指出的，如果用户在<input type='number'>元素中<input type='number'> ' abcd '，则无法通过$(this).val()获得值'abcd' 。 （警告：我只在Chrome中测试过。）

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

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

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

Answer 3

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

现场演示

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