vue input只有输入数字和小数点且小于等于99。和自动聚焦点

最新推荐文章于 2025-07-31 16:47:10 发布

qq_36392571

最新推荐文章于 2025-07-31 16:47:10 发布

阅读量1.7k

点赞数

CC 4.0 BY-SA版权

分类专栏： vue 项目过程问题

本文链接：https://blog.youkuaiyun.com/qq_36392571/article/details/93312409

vue 同时被 2 个专栏收录

4 篇文章

订阅专栏

项目过程问题

2 篇文章

订阅专栏

博客介绍了在Vue中对input输入框的操作。使用input的type=number时隐藏箭头，还给出了自动聚焦和限制input的value小于等于99的代码实现，包括css、html和script部分的代码示例。

我使用的input的type=number 。先将箭头给隐藏。

css:

html:

script:

自动聚焦：

Vue.directive('focus1',{
inserted:function(el){
el.focus()
}
});

input的value 小于等于99:

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.indexOf('.') != -1){ //value中是否已经有" ."了
e.preventDefault();
}
return;
}else if(!re.test(String.fromCharCode(charcode)) && charcode > 9 && !e.ctrlKey){
if(e.preventDefault){
e.preventDefault();
}else{
e.returnValue = false;
}
}
let number = el.value;
let code = el.value + String.fromCharCode(charcode);
if(number == 99){
e.preventDefault();
}else if(number < 99){
if(code.length == 3 && charcode ==46){
e.preventDefault();
}
}
});
}
});