5

例子

似乎输入文本<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"/>

4

3 回答 3

10

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

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

对于您的 JSFiddle 示例，在文本框中alert按下后会出现。anumber

注意：检查$(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）将认为输入的其余部分是有效数字，无论后面跟着什么字符（例如，在 IE 眼中1a2一样有效） 12. 但是，在 Chrome 中，如果你输入了一个非数字，那么它会立即忽略该输入并声明它是无效的；在 IE10 中，如果以非数字开头，则行为相同。

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

在这两种浏览器中，如果number被认为是无效的，那么this.value（因此$(this).val()）将返回空白。number在 IE10 中，如果以数字 ( ) 开头，您可以获得原始的无效值0-9。两个浏览器只会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。和伪类在 IE10 中不起作用，:valid除非该字段被标记为（在 IE9 中根本没有），但它们都在 Chrome 中起作用而没有将其标记为.:invalidnumberrequiredrequired

于 2013-04-19T18:46:47.247 回答
2

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

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

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

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

于 2013-12-21T01:15:13.270 回答
0

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

现场演示

$('input').on('keyup', function() {
    alert('change');
});
于 2013-04-19T18:48:12.197 回答