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

最新推荐文章于 2023-10-12 15:58:03 发布

原创最新推荐文章于 2023-10-12 15:58:03 发布 · 1.4k 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#javascript #前端 #vue.js

pits 专栏收录该内容

190 篇文章

订阅专栏

本文介绍如何使用ElementUI的el-input组件通过JS正则表达式限制用户输入，确保输入框仅接受最多两位小数的数值，并阻止非法字符输入。同时提供了一种限制输入为整数的方法。

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>

问题

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

pic_center

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>

ps 限制输入整数的方案

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