html5 input[number]類型輸入非數字字元val()為“”和解決方案

標籤：感知   ring   value   put   input框   字元   其他   內容   document   

html5新增的number輸入類型會在input框獲得焦點的時候呼起數字鍵台，增加了體驗的效果。但是在一些安卓機器上，還是能夠切換道字元輸入，使用者也會不小心輸入“+”“—”之類的非數字字元。測試了一下，number類型是會自動忽略字母字元和其他非數字字元的，除了“+”“—”“.”這兩個字元可以輸入,因為這兩個是正負數和小數點的符號。

number類型還有一個很坑的點是，如果輸入框中的內容不是純數字（正數，負數都行），內容中包含一些字元的時候，對應dom元素的value就是空（""）。

因此無論是原生的document.getElementById("txt").value還是jq的$(‘selector‘).val()得到的都是空。

這個問題很難解決，即使是keyup和keypress監聽輸入框也會遇見。

我做的需求是要求不能夠輸入小數，即是不能輸入數字以外的字元。輸入以後就把字元刪除。

我的做法是用Regex檢測出輸入了字元，把最後一個字元去掉。用keyup監聽。

keyup/keypress監聽在輸入小數點或者+—符的當下是感知不到的，即是dom的value沒有改變。在符號後再輸入數字字元時才能通過value得知。

$("#moneyInput").on("keyup", function(e) {
var obj = $("#moneyInput"),
value = obj.val();
if (!(/(^\+?[1-9][0-9]*$)/.test(value))) {
value = value.substring(0,value.length-1);
// obj.val("");
obj.val(value);
}
});

 

html5 input[number]類型輸入非數字字元val()為“”和解決方案