el-input 只能输入数字并限制长度
在上一个博客中,有关于限制长度的使用,本文介绍限制只能输入数字的方法
el-input 代码如下:
<el-form-item label="账号" required>
<el-input v-model="form.tele" style="width:160px;" oninput="if(value.length>11)value=value.slice(0,11)" placeholder="请输入账号" type="number"></el-input>
</el-form-item>
在main.js中加入如下代码:
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;
}
}
});
}
});
演示如下:

el-input 只能输入数字并限制长度的更多相关文章
- input只能输入数字并限制长度
<style> /*在chrome下移除input[number]的上下箭头*/ input::-webkit-outer-spin-button,input::-webkit-inner ...
- 限制HTML的input只能输入数字、英文、汉字...
限制HTML的input只能输入数字.英文.汉字... 关键词:正则表达式, JavaScript, HTML, input 常用HTML正则表达式1.只能输入数字和英文的:<input onk ...
- INPUT只能输入数字
input只能输入数字: (只能输入数字,并且输入的值不能大于99),但是这样有个问题,就是当输入非数字字符时,输入框中所有的字符都会被清除 <input type="text&quo ...
- javascript正则表达式控制input只能输入数字
不能输入中文 <input type="text" name="textfield" onkeyup="this.value=this.val ...
- 用js使得输入框input只能输入数字
JS判断只能是数字和小数点1.文本框只能输入数字代码(小数点也不能输入)<input onkeyup="this.value=this.value.replace(/\D/g, ...
- 关于input只能输入数字的两种小方法
第一种: 直接给input标签 name赋值如下 <input name="start_price" id="start_price" type=&quo ...
- 控制input只能输入数字和两位小数
<input type="text" name="je" onkeyup="clearNoNum(this)" /> funct ...
- input 只能输入数字、字母、汉字等
1.文本框只能输入数字代码(小数点也不能输入) <input onkeyup="this.value=this.value.replace(/\D/g,'')" onafte ...
- jquery控制input只能输入数字和两位小数
jquery代码 function num(obj){ obj.value = obj.value.replace(/[^\d.]/g,""); //清除"数字" ...
随机推荐
- STM32 MDK摘记
题记:这人是越懒越懒,记性也也来越差,前段时间改了个链接文件,今天想用,竟然忘了咋写....还是勤记记吧... 随时更新,笔记帖. 不喜勿喷! 1,关于MDK链接文件宏的定义 #! armcc -E ...
- 创建一个用目录分层的Rust应用
一:前言,这是Rust基础程序,主要是用来讲解怎么创建分层(类似Java package)的应用: 二:代码实现: 2.1在src下创建main.rs,然后声明main方法,代码如下: fn main ...
- C++拾忆
1.引用 1.建立引用的时候,必须初始化,引用一旦初始化,就和一个对象绑定,不能再修改为其他对象的引用 2.对引用取地址,和对原始对象取地址,是同一个地址 3.不能用做引用的:void.数组 2.内联 ...
- 字符串的分隔方法 split()
java中的split()的方法 string.split([separator,[limit]]) 参数 string (必选),要被分解的 String 对象或文字.该对象不会被 split 方法 ...
- centos 用户组操作
adduser testuser //新建testuser 用户 passwd testuser //给testuser 用户设置密码 useradd -g testgroup testuser // ...
- Web服务器和Tomcat
Web服务器常用: WebLogic:是BEA公司的推出的产品,现在已经被oracle收购,是目前应用最广泛的Web服务器,支持JavaEE规范,商用收费,开发者可以免费使用. WebSphere:I ...
- Python--类的定义与使用
转载自https://www.liaoxuefeng.com/wiki/001374738125095c955c1e6d8bb493182103fac9270762a000/0013868200407 ...
- spring 条件化配置
步骤一: 实现接口:org.springframework.context.annotation.Condition import org.springframework.context.annota ...
- vmware vcsa-故障1
1.重启vcsa后不能登陆webclient 做实验得时候重启vcsa后不能登陆 web client 开启vcsa直接进入命令模式,命令行登陆后提示:failed to connect to se ...
- Spring Cloud Alibaba学习笔记(13) - Spring Cloud Stream的监控与异常处理
Spring Cloud Stream监控 Spring Boot Actuator组件用于暴露监控端点,很多监控工具都需要依赖该组件的监控端点实现监控.而项目集成了Stream及Actuator后也 ...