前言
程序員小周經(jīng)過一周的加班終于可以功能提測(cè)，sei知道測(cè)試姐姐剛開始測(cè)就告訴小周，你這不行，你這些輸入字段都應(yīng)該限制成數(shù)字，小周一聽，好辦啊，改個(gè)type類型唄，卡卡改完代碼，卡卡就提交啦！這時(shí)候產(chǎn)品哥哥跑過來躍躍欲測(cè)，我滴天，這個(gè)e是幾個(gè)意思，這個(gè)+，-，.是咋個(gè)回事，留下目瞪口呆卡卡打臉滴小周，臨走產(chǎn)品哥哥還安慰小周，沒事，這個(gè)一百度就解決了= =|||
然后
小周跟這個(gè)e杠上了，不明白這個(gè)e到底是個(gè)啥身份，你又不是數(shù)字，你瞎湊什么熱鬧。一查目瞪口呆.jpg，e = 2.71828！好吧，看我怎么消滅你！
不出意外，如果你也是搜索input type number e的話，相信你一定能看到這個(gè)聲稱一句話搞定滴解決方式
<input type="number" onKeypress="return (/[\d]/.test(String.fromCharCode(event.keyCode)))">
如果你直接cope到你的react代碼里面，第一步會(huì)報(bào)錯(cuò)告訴你onKeypress不存在，好吧，改成onKeyPress，不對(duì)，onKeyPress得賦個(gè)function，不能是string。那接著抽個(gè)方法
handleKeyPress(event) {
return (/[\d]/.test(String.fromCharCode(event.keyCode)));
}
//render
<input type="number" onKeypress={this.handleKeyPress}>
不出意外，這個(gè)時(shí)候你的e，+，-等等這些討厭的字符還是存在，你找了好久，才發(fā)現(xiàn)event里面根本就沒有keyCode，只有key，charCode，然后你又改
handleKeyPress(event) {
return (/[\d]/.test(String.fromCharCode(event.charCode)));
}
//render
<input type="number" onKeypress={this.handleKeyPress}>
咦，說好的一句話解決的呢！騙子，不好使！為什么呢！
仔細(xì)瞅瞅這句話，用正則驗(yàn)證每次輸入的單個(gè)字符，即使返回false也并沒有卵用啊，為了驗(yàn)證
<input type="number" onKeypress={false}>
哎果然，現(xiàn)象是一樣的。
換個(gè)思路吧，其實(shí)就是想當(dāng)key是e，E，+，-，.的時(shí)候阻止它的默認(rèn)行為
handleKeyPress(event) {
const invalidChars = ['-', '+', 'e', '.', 'E']
if(invalidChars.indexOf(event.key) !== -1){
event.preventDefault()
}
}
//render
<input type="number" onKeypress={this.handleKeyPress}>
果然，搞定啦！
附上其他解決方式：https://stackoverflow.com/questions/39291997/how-to-block-e-in-input-type-number
