解决数值输入框可以输入字母E的问题

1、问题描述

（1）如果页面需要输入常规数值时，我们通常会使用number类型的控件。这样浏览器会自动忽略非数值字符，只能输入数字进去。

<input type="number"/>

 

（2）但我们发现还是能输入进去字母E，无论大写还是小写（当然除了 e 以外的其它字母确实无法输入）。

2、问题原因

       e在数学上代表的是无理数，是一个无限不循环的小数，其值约为2.7182818284，所以在输入e的时候，输入框会把e当成一个数字看待。

3、解决办法

（1）如果我们想让 number 控件只能输入 0-9 这样纯数字的话，可以在 onkeypress 属性上增加个判断（只接收 0-9 的按键行为）。

	
<input type="number" onkeypress="return (/[\d]/.test(String.fromCharCode(event.keyCode)))"/>

（2）如果不需要右侧的上下小箭头（步进器），只要实现一个 input 数字输入框。

/*添加css样式*/
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
}
 
input[type="number"] {
    -moz-appearance: textfield;
}