js input 正则保留2位小数中文拼音输入问题 + 限制输入整数的方案

js input 正则保留2位小数中文拼音输入问题 + 限制输入整数的方案

problem

背景

• element ui el-input组件
• 原生input事件

需求

• 限制输入框的输入
• 只允许输入数字和小数点
• 保留2位小数，不允许输入第3位小数

实现

• 使用 input 原生 oninput 事件
• 使用 js 正则匹配

// 之前的实现方式
<el-input 
    v-model="dataForm.amount4" 
    placeholder="金额4"
    oninput="value=value.replace(/^\./g, '0.').match(/\d+\.?\d{0,2}/)"
    style="width:200px">
</el-input>
1
2
3
4
5
6
7

问题

• 在输入中文拼音时，可以阻止其输入
• 但是会有严重问题：会将之前输入的数字删除
• 并且：这个问题只有在windows出现，mac系统没有此问题

reason

还不知道原因 如果有大佬知道，还请赐教，不胜感激

solution

解决办法：将oninput改为onkeyup事件即可

// 现在实现方式 将 oninput 改为 onkeyup即可
<el-input 
    v-model="dataForm.amount4" 
    placeholder="金额4"
    onkeyup="value=value.replace(/^\./g, '0.').match(/\d+\.?\d{0,2}/)" 
    style="width:200px">
</el-input>
1
2
3
4
5
6
7

ps 限制输入整数的方案

<el-input 
    v-model="dataForm.amount5" 
    placeholder="金额5" 
    onkeyup="value=value.match(/\d+/)" 
    style="width:200px">
</el-input>
1
2
3
4
5
6