我来打自己脸了!!!!...刚刚发现在中文输入法下是无效的,有人能解决这个问题么
如果要求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”
<input type="text" v-enter-number2 >
//在只允许输入正整数的情况下，type="number" 可以防止输入中文，step="0.0000000001" 可以处理输入小数时的“请输入有效值，两个.....”
<input type="number" step="0.0000000001" v-enter-number >
不知道这段代码有没有可优化的地方，或者存在什么问题，如有其他更好的建议，欢迎留言
input框限制只能输入正整数、字母、小数、
这篇博文大部分来自于网上,为了方便自己查阅,以及帮助他人. 1,只能输入正整数
input框限制只能输入正整数、字母、小数、汉字
有时需要限制文本框输入内容的类型,本节分享下正则表达式限制文本框只能输入数字.小数点.英文字母.汉字等代码. 例如,输入大于0的正整数 代码如下: function ...
string.Format出现异常";输入的字符串格式有误";的解决方法
string.Format出现异常"输入的字符串格式有误"的解决方法 今天在做项目时,碰到一个很奇怪的问题,我使用string.Format居然报“输入的字符串格式有误”的错误,我 ...
随机推荐
HFSS学习(一)计划
2015-11-28 21:05:33 基本概念 边界条件 激励源 建模 网格划分 变量设置与调谐优化 仿真结果 实例 微带线仿真 Ku波段微带线发夹线滤波器仿真 介质滤波器 腔体滤波器 微带一分四功 ...
DTcms 扩展字段标签调用
前台模版: 文章列表:{dr[author]} 文章内容{model.fields[author]} 点击数 后台CS文件:model.fields["author"].ToStr ...
The Movie db (TMDB)的API申请
在共享API TMDB中申请时,一只报错Application summary please elaborate on how you plan to use our API,我是用汉字描述的,开始以 ...
k8s部署etcd数据库集群
⒈下载 https://github.com/etcd-io/etcd/releases ⒉解压 tar -zxvf etcd-v3.3.12-linux-amd64.tar.gz ⒊移动可执行文件及 ...
[Freemarker]自定义时间戳函数
使用freemarker的web项目经常需要用在Url后面加上时间戳来保证资源不被缓存,我们可以自定义方法实现时间戳. 先看freemarker配置信息:
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
