在输入框input标签设置
type="number"
的目的就是为了规避用户输入数字以外的内容。然而,在html的w3c标准里,e
认定为自然对数中的无理数常量,+-
则是表示正负,生产中有时不需要甚至禁止输入这些。
1.值改变时,替换其中非数字内容(效果不好)
为输入框绑定事件,去除掉其中非数字和小数点部分。
onchange
事件其实更接近于onblur
,失焦且新旧值不等时才触发。oninput
可做到输入单个字符就触发。
此外,网上还有使用onkeyup
方法,监听按键抬起事件,除CtrlAltShiftEsc等键。(说关机键的请回炉重造。)
值得注意的是,onkeydown
时value尚未改变,无法监听值并替换。
function setNum(e){
e.value=e.value.replace(/[^0-9.]/g,"");
}
在各个方法中,输入+-e
后,监听input的值,不论是e.value
还是$(e).val()
,打印出来都是空,而(不替换符号时)页面上有显示内容。
起初以为是jQuery或者项目中的其他插件的影响,后单独起一个demo,效果也是如此。
<input type="number" oninput="setNum(this)">
function setNum(e){
console.log(e.value)<