在 Chrome 中检测和清除表单域

Question

前几天我在构建表单时遇到了一个问题。 输入框有一个类型“数字”。 在 Chrome 中，输入字段显示向上/向下箭头。单击向上或向下按钮时，我无法检测到更改，因此我使用 CSS 删除了按钮。这很简单，但并没有解决我所有的问题。

我在现场进行了一些验证（使用 keyup）。如果我在该字段中输入一个数字，它可以正常工作，但如果我在该字段中输入一个字母，我就无法检测到它。

在 FF 和 IE 中使用 .val() 可以很好地获取字段的值（数字或字母），但在 Chrome 中却没有那么多。 如果字段中有字母，我也找不到清除字段的方法。使用 .val('') 只需将光标向左移动。

正如我所说，这个问题是特定于使用 Chrome 的。对于所有其他浏览器，我的代码都可以正常工作。

关于可用于解决此问题的代码的任何建议？

Answer 1

问题都围绕着“数字”类型的输入。

HTML5 草案定义：

值清理算法如下：如果元素的值不是有效的浮点数，则将其设置为空字符串。

http://www.w3.org/TR/html5/forms.html#number-state

尝试执行 .val() 来检索其中包含非数字的 type=number 输入只会返回空字符串。看起来 Chrome 的实现是在实际检索任何值之前将字段的值设置为空字符串。

至于使用 .val('') 重置字段并且无法识别 keyup，此代码似乎可以工作 http://jsfiddle.net/hVVSA/2/

JS

var $input = $('input').keyup(function(){
  console.log("here");
});

$('#clearfield').click(function(){
  console.log('val was '+$input.val());
  $input.val('');
});

HTML

<input type="number" />

<button id="clearfield">clear</button>