1.屏蔽<input>右侧步进器
新建一个style.css文件,内容为
.numberinput::-webkit-inner-spin-button,
.numberinput::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
在源码文件中引入该css,并且修改<input>的classname,加上“numberinput”即可
import './style.css'
<input
className="numberinput text-sm gray-900 max-w-sm p-2 border border-gray-300"
maxLength={19}
type="number"
/>
2.屏蔽<input>在获取焦点后鼠标滚动可以改变值的问题。
给<input>加上这么一条属性即可。
onWheel={event => (event.target as HTMLInputElement).blur()}
3.其他方案
在onChange或onKeyPress中使用正则检查输入是否正确。或者干脆别用<input>,换<InputNumber>等包装好的组件
<input
onKeyPress={(event) => {
if (!/[0-9]/.test(event.key)) {
event.preventDefault();
}
}}
/>
<input
onChange={event =>
this.setState({financialGoal: event.target.value.replace(/\D/,'')})
}
/>