獲得價值 <input type=“number”> 使用JS時，它包含非數字字符

Question

這個jsfiddle演示了以下問題。

最簡單的例子是：

<input id="number" type="number" value="1">
console.log(document.getElementById('number').value);

這按預期記錄1。 但是這樣：

<input id="number" type="number" value="1A">
console.log(document.getElementById('number').value);

只記錄一個空字符串''，因為值中包含非數字字符。 某些設備+瀏覽器（例如Chrome）允許您在這些輸入中輸入非數字字符。

這很煩人，因為我想為支持它的設備輸入type =“number”（例如iPhone，iPad編號鍵盤）。 但是我想使用javascript來阻止輸入臟輸入 - 這需要在keyup上獲取值 - 然后regex替換非數字字符。

看來jQuery的.val（）方法給出了相同的結果。

Answer 1

這就是我要找的東西：

$('input[type=number]').keypress(function(e) {
  if (!String.fromCharCode(e.keyCode).match(/[0-9\.]/)) {
    return false;
  }
});

我知道防止用戶輸入可能很煩人，這仍然允許無效輸入，如1.2.3

但在這種情況下，這正是我所需要的。 希望它對其他人有用。 感謝@ int32_t的建議。

Answer 2

您不應該使用<input type=number>來表示不是數字的東西（在非常數學意義上 - 它也不適用於電話號碼或郵政編碼）並清除值是故意的。

您可以測試設備是否支持type=number並僅在不支持的情況下附加后備：

var input = document.createElement('input');
input.setAttribute('type','number');
if (input.type != 'number') { // JS property won't reflect DOM attribute
   polyfill_number();
}

或者（特別是如果您的號碼是郵政編碼，序列號等），您可以使用：

<input type=text pattern="[0-9]*">

這也將改變鍵盤。