一個小細節，以前很少注意，直到最近做的一個項目，當我把一個輸入數字的input框的類型設置為number時，input框還是可以無限輸入，設置maxlengh=10就不起作用了。
然后我就去百度了一下，type設置為tel時，maxlength就起作用了。為什么呢？
這里我先說一下input框type=tel和type=number的區別。
首先HTML5加入了新的input類型 number，這是方便數量輸入的。如果是在移動端中，屬性type=”number”和type=”tel”會喚起系統的數字鍵盤，這對於交互還是挺友好的。
但是type並不能作為驗證依據,
type字段只是為輸入提供選擇格式,
更多情況下應該說新增的type是為了適配移動端web app的存在
例如說當type=tel的時候,在手機上打開頁面會出現電話鍵盤(不是數字鍵盤,兩者並不一樣,電話鍵盤還包括*和#)
當type=email的時候,會出現帶@和.com符號的全鍵盤(各設配各系統實現貌似有差異)
所以才要有pattern的存在,
當觸發表單提交的時候,瀏覽器會將輸入與pattern屬性做匹配來最終判斷是否有效輸入
當然了,后端驗證數據有效性就在此問題的范疇之外了；
解決方案
<input type="number" name="phone" id="phone" value="phone" oninput="if(value.length>11)value=value.slice(0,11)" />