Products
GG网络技术分享 2025-03-18 16:14 1
在开发过程中，基本都遇到过需要限制输入的情况，比如金额、仅字母数字、可输入小数位等，网上搜了很多方法也遇到一些坑，所以分享出来。
在VUE中可以在v-modal后添加修饰符的形式来限制输入，比如：
<inputv-model.number="testValue"type="number">
.number可以实现限制数字输入，但是会有以下问题：
/*普通IE浏览器样式清除*/
input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{
-webkit-appearance:none!important;
}
/*火狐浏览器样式清除*/
input[type="number"]{
-moz-appearance:textfield;
}
通过@input监听更新数据，实现只能输入数字，而且可以自行定制限制输入内容
<inputv-model="testValue"@input="testValue=testValue.replace(/[^\\d]/g,'')">
此方法可以满足需求，但是无法封装进行批量使用
封装input限制输入指令
//input.js
constaddListener=function(el,type,fn){
el.addEventListener(type,fn,false)
}
//去掉空格
constspaceFilter=function(el){
addListener(el,'input',()=>{
el.value=el.value.replace(/\\s+/,'')
})
}
//限制只能输入整数和小数（价格类、最多两位小数）
constpriceFilter=function(el){
addListener(el,'input',()=>{
el.value=(el.value.match(/^\\d*(\\.?\\d{0,2})/g)[0])||null
if(isNaN(el.value)){
el.value=''
}
})
}
exportdefault{
bind(el,binding){
if(el.tagName.toLowerCase()!=='input'){
el=el.getElementsByTagName('input')[0]
}
spaceFilter(el)
switch(binding.arg){
case'price':
priceFilter(el)
break
default:
console.warn('未知指令类型',binding.arg)
break
}
}
}
注册全局自定义指令
//main.js
importinputFilterfrom'@/directives/InputFilter.js'
Vue.directive('inputFilter',inputFilter)
使用v-input-filter指令
<inputv-modal="testValue"v-input-filter:price>
这样封装在使用时会出现一个隐蔽的bug，就是在输入指令中正则限制以外的字符时，视图中输入框显示是正确的，但是在浏览器控制栏Vue Devtools中的testValue最后一位字符是最后输入的时的字符。
比如输入abc、123abc输入框内是 、123，但实际testValue值是c、123c。
原因是vue中绑定的值是通过监听input进行赋值的，直接修改输入框值不会触发input事件，需要通过dispatchEvent再次手动触发input事件，修改如下:
//input.js
···
//防抖
letdebounce=(fn,delay)=>{
vardelay=delay||100;
vartimer;
returnfunction(){
varth=this;
varargs=arguments;
if(timer){
clearTimeout(timer);
}
timer=setTimeout(function(){
timer=null;
fn.apply(th,args);
},delay);
};
}
···
//限制只能输入整数和小数（价格类、两位小数）
constpriceFilter=function(el){
addListener(el,'input',debounce(()=>{//添加防抖防止反复触发事件导致内存溢出
el.value=(el.value.match(/^\\d*(\\.?\\d{0,2})/g)[0])||null
if(isNaN(el.value)){
el.value=''
}
//触发input事件
el.dispatchEvent(newEvent('input'))
}))
}
···
到这里算是满足了要求，也能方便的使用，分享出来希望能够抛砖引玉，学习到更好的方式，如果有更好的方法请告诉我，谢谢！
在某些项目中 input 框只能输入数字，可以用以下办法：
先在标签上绑定上 @input 事件来监听标签的值变化，通过正则来改变输入的值。
| <input class=\"keep_input\" v-number-only style=\"width:35px\" v-model=\"scope.row.fileOrder\" @input=\"scope.row.fileOrder = Number($event.target.value.replace(/\\D+/, \'\'))\" /> |
第二部封装个自定义指令放在标签上！
| directives: { numberOnly: { bind: function(el) { el.handler = function() { el.value = Number(el.value.replace(/\\D+/, \'\')) } el.addEventListener(\'input\', el.handler) }, unbind: function(el) { el.removeEventListener(\'input\', el.handler) } } }, |
接下来就可以去页面看效果了，只能输入数字且只是正数！
附上 element 的 input 样式代码
| .keep_input { -webkit-appearance: none; background-color: #fff; background-image: none; border-radius: 4px; border: 1px solid #dcdfe6; -webkit-box-sizing: border-box; box-sizing: border-box; color: #606266; display: inline-block; font-size: inherit; outline: 0; padding: 0 15px; -webkit-transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1); transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1); height: 30px; line-height: 30px; text-align: left; } .keep_input:focus { border-color: #54a6de; outline: 0; } |
补充知识：记录el-input type=number限制长度el-input使用
如下所示：
| <el-input type=\"number\" oninput=\"if(value.length>10)value=value.slice(0,10)\" @keyup.enter.native=\"query()\" onKeypress=\"return(/[\\d\\.]/.test(String.fromCharCode(event.keyCode)))\" :max=\"99999999\"> </el-input> |
oninput 是个自定义事件 在事件里面获取输入的数字长度，来进行判断如果大于规定长度就进行剪切。
keyup.enter.native 是个键盘回车事件，当按下Enter键时触发query()事件。
max为输入框的最大值，如果input的type=number那么输入框内是输入不了字符的。
number框 解决输入e的问题
主要原因是：e在数学上代表的是无理数，是一个无限不循环的小数，其值约为2.7182818284，所以在输入e的时候，输入框会把e当成一个数字看待。
可以采用下面的方式来避免这个BUG，在input标签中添加如下属性：
| onKeypress=“return(/[\\d.]/.test(String.fromCharCode(event.keyCode)))” <el-input placeholder=\"请输入密码\" v-model=\"input\" :show-password=\"true\"></el-input> |
show-password 加上这个属性输入字符进行隐藏一般用于密码框使用
记录问题！
以上这篇vue 限制input只能输入正数的操作就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。
Demand feedback
