在上一个博客中,有关于限制长度的使用,本文介绍限制只能输入数字的方法

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 只能输入数字并限制长度的更多相关文章

  1. input只能输入数字并限制长度

    <style> /*在chrome下移除input[number]的上下箭头*/ input::-webkit-outer-spin-button,input::-webkit-inner ...

  2. 限制HTML的input只能输入数字、英文、汉字...

    限制HTML的input只能输入数字.英文.汉字... 关键词:正则表达式, JavaScript, HTML, input 常用HTML正则表达式1.只能输入数字和英文的:<input onk ...

  3. INPUT只能输入数字

    input只能输入数字: (只能输入数字,并且输入的值不能大于99),但是这样有个问题,就是当输入非数字字符时,输入框中所有的字符都会被清除 <input type="text&quo ...

  4. javascript正则表达式控制input只能输入数字

    不能输入中文 <input type="text" name="textfield"  onkeyup="this.value=this.val ...

  5. 用js使得输入框input只能输入数字

        JS判断只能是数字和小数点1.文本框只能输入数字代码(小数点也不能输入)<input onkeyup="this.value=this.value.replace(/\D/g, ...

  6. 关于input只能输入数字的两种小方法

    第一种: 直接给input标签 name赋值如下 <input name="start_price" id="start_price" type=&quo ...

  7. 控制input只能输入数字和两位小数

    <input type="text" name="je" onkeyup="clearNoNum(this)" /> funct ...

  8. input 只能输入数字、字母、汉字等

    1.文本框只能输入数字代码(小数点也不能输入) <input onkeyup="this.value=this.value.replace(/\D/g,'')" onafte ...

  9. jquery控制input只能输入数字和两位小数

    jquery代码 function num(obj){ obj.value = obj.value.replace(/[^\d.]/g,""); //清除"数字" ...

随机推荐

  1. STM32 MDK摘记

    题记:这人是越懒越懒,记性也也来越差,前段时间改了个链接文件,今天想用,竟然忘了咋写....还是勤记记吧... 随时更新,笔记帖. 不喜勿喷! 1,关于MDK链接文件宏的定义 #! armcc -E ...

  2. 创建一个用目录分层的Rust应用

    一:前言,这是Rust基础程序,主要是用来讲解怎么创建分层(类似Java package)的应用: 二:代码实现: 2.1在src下创建main.rs,然后声明main方法,代码如下: fn main ...

  3. C++拾忆

    1.引用 1.建立引用的时候,必须初始化,引用一旦初始化,就和一个对象绑定,不能再修改为其他对象的引用 2.对引用取地址,和对原始对象取地址,是同一个地址 3.不能用做引用的:void.数组 2.内联 ...

  4. 字符串的分隔方法 split()

    java中的split()的方法 string.split([separator,[limit]]) 参数 string (必选),要被分解的 String 对象或文字.该对象不会被 split 方法 ...

  5. centos 用户组操作

    adduser testuser //新建testuser 用户 passwd testuser //给testuser 用户设置密码 useradd -g testgroup testuser // ...

  6. Web服务器和Tomcat

    Web服务器常用: WebLogic:是BEA公司的推出的产品,现在已经被oracle收购,是目前应用最广泛的Web服务器,支持JavaEE规范,商用收费,开发者可以免费使用. WebSphere:I ...

  7. Python--类的定义与使用

    转载自https://www.liaoxuefeng.com/wiki/001374738125095c955c1e6d8bb493182103fac9270762a000/0013868200407 ...

  8. spring 条件化配置

    步骤一: 实现接口:org.springframework.context.annotation.Condition import org.springframework.context.annota ...

  9. vmware vcsa-故障1

    1.重启vcsa后不能登陆webclient 做实验得时候重启vcsa后不能登陆 web client 开启vcsa直接进入命令模式,命令行登陆后提示:failed to connect  to se ...

  10. Spring Cloud Alibaba学习笔记(13) - Spring Cloud Stream的监控与异常处理

    Spring Cloud Stream监控 Spring Boot Actuator组件用于暴露监控端点,很多监控工具都需要依赖该组件的监控端点实现监控.而项目集成了Stream及Actuator后也 ...