html input 正整数,input框只允许输入正整数、正数(包含小数)的解决方法 vue.js实现...

我来打自己脸了!!!!...刚刚发现在中文输入法下是无效的,有人能解决这个问题么

如果要求input只能输入数字怎么做?

设置type="number" ? 那我如果想限制长度,此时maxLength=“6” 会失效,js限制长度? 太麻烦了

并且type="number" 还存在的一个问题是,当输入的是小数时,鼠标悬停在input上会提示“请输入有效值,两个最接近的值为0和1”,这对于用户体验来说非常差,非常容易误导用户,

那就只能设置type="text"了,但是设置type="text"又会导致input可以输入非数字了,于是网上百度google找的一大堆各种通过js去控制的,比如onkeyup事件等,检测到输入的是非数字就截取掉,替换掉,这能够实现只能输入数字,但是正如标题所说,只允许正整数和正小数,而且还存在字母e 和 输入1.1.111.....1 这种情况,依然通过这些方法去实现未免太麻烦了

今天,分享一下自己实现只能输入正整数和正小数,一个vue指令就可以解决!

只能输入正整数

根据keypress事件,监视键盘keyCode码,结合数字正则表达式 判断键入的keyCode是否是数字,如果非数字则调用preventDefault事件阻止默认行为

代码中的正则使得只能输入0-9,其他所有的字符都无法输入,简单粗暴

Vue.directive('enterNumber', {

inserted: function (el) {

el.addEventListener("keypress",function(e){

e = e || window.event;

let charcode = typeof e.charCode == 'number' ? e.charCode : e.keyCode;

let re = /\d/;

if(!re.test(String.fromCharCode(charcode)) && charcode > 9 && !e.ctrlKey){

if(e.preventDefault){

e.preventDefault();

}else{

e.returnValue = false;

}

}

});

}

});

只能输入正数(包含小数)

这个指令是在上面指令上做的修改,即允许输入小数点,但是如果单纯的允许输入小数点,那就会造成输入1.1....1....1...1这种无数小数点的情况,所有这里的处理方式是如果小数点是第一次输入则放行,但是在下次按下键盘上的小数点keyCode 时会对输入的value值进行判断,如果value值存在小数点,则调用preventDefault() 阻止事件

Vue.directive('enterNumber2', {

inserted: function (el) {

el.addEventListener("keypress",function(e){

e = e || window.event;

let charcode = typeof e.charCode == 'number' ? e.charCode : e.keyCode;

let re = /\d/;

if(charcode == 46){

if(el.value.includes('.')){

e.preventDefault();

}

return;

}else if(!re.test(String.fromCharCode(charcode)) && charcode > 9 && !e.ctrlKey){

if(e.preventDefault){

e.preventDefault();

}else{

e.returnValue = false;

}

}

});

}

});

使用方法

将上诉代码放在main.js中,然后在input框上添加自定义指令,注意自定义指令要以v-开头,并且驼峰命名要写在小写的形式

注:这时候的input框type只需要使用text类型就可以了,不要使用number类型,不然会出现“请输入有效值,两个最接近的值为0和1”

//在只允许输入正整数的情况下,type="number" 可以防止输入中文,step="0.0000000001" 可以处理输入小数时的“请输入有效值,两个.....”

不知道这段代码有没有可优化的地方,或者存在什么问题,如有其他更好的建议,欢迎留言

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值