最近H5開發，用到了金額輸入框，但是又沒有定制金額鍵盤，所以就用type="number"調用系統的數字鍵盤。
需求需要，用戶是不能輸入除數字以為其它的內容的，金額最多只能輸入到小數點后的兩位，。
所以研究了一些，number鍵盤，當用戶輸入非數字時，取到的value為空，但是輸入框展現的還是用戶所輸入的內容。
例如 ：用戶輸入a，渠道的value 為空，但是輸入框展現的為a；特例（當用戶輸入2.時，取到的值為2，輸入框展現為2.）
<!DOCTYPE html> <html> <head> <title>demo5</title> <meta charset="utf-8"> <meta name="apple-mobile-web-app-capable" content="yes" /> <meta name="viewport"content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" /> <style type="text/css"> </style> </head> <!-- 禁用復制 ，除去一些不必要的因素 --> <body onpaste="return false"> <div><input type='number' id = 'number'></div> </body> <script type="text/javascript"> var me = window; (function init(){ me.number = getId('number'); me.n = ''; initEvent(); function initEvent(){ me.number.addEventListener('keyup', number, false); } function getId(id){ return document.getElementById(id); } function number(){//金額， console.log(this.value); if(this.value == ''){//校驗，用戶輸入后，輸入框的值是否為數字，當不為數字時，取到的為空 this.value=''; this.value = me.n; return } if(!/^\d{0,9}\.{0,1}(\d{1,2})?$/.test(this.value)){//校驗不超過兩位小數 this.value = me.n; } if(window.event.keyCode != 8){ if(this.value%1==0 && me.n==this.value){//當用戶按下非刪除鍵時，新值和舊值相同,舊值為整數 return } if(me.n.indexOf(".")>-1 && me.n==this.value){//當用戶按下非刪除鍵時，新值和舊值相同,舊值為小數 this.value=''; this.value = me.n; return } }else{ if(me.n.indexOf(".")>-1 && this.value.indexOf(".")<0){//當按下刪除時，刪掉小數點時 me.n = this.value; return } } me.n = this.value if(me.n.indexOf(".")>0){ this.value = me.n; } } }()) </script> </html>
可以試一下，這樣幾可以限制用戶的輸入