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

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. WXS-----学会使用WXS

    学会使用WXS require函数用于引入其他WXS模块 不要重复引入两个wxs模块,不然后者会覆盖前者

  2. 如何取到el-select中的label

    在el-select中我们一般都是取到value的值,但是有时候我们需要value和label都需要.那怎么方便的取到呢 在网上经常有ref="cascader"这个方法,但是经过 ...

  3. 洛谷 题解 P1041 【传染病控制】

    [思路] 题目给出一棵树.第\(i\)步拆的一定是第\(i\)层与第\(i+1\)层之间的连边,否则不是最优(自行证明即可),所以可以暴力枚举每一次拆哪一个节点与上一个节点的连边. 把所有节点所在的层 ...

  4. 线性链条件随机场(CRF)的原理与实现

    基本原理 损失函数 (线性链)CRF通常用于序列标注任务,对于输入序列\(x\)和标签序列\(y\),定义匹配分数: \[ s(x,y) = \sum_{i=0}^l T(y_i, y_{i+1}) ...

  5. 【转】那些年用过的Redis集群架构(含面试解析)

    引言 今天是2019年2月12号,也就是大年初八,我接到了高中同学刘有码面试失利的消息. 他面试的时候,身份是某知名公司的小码农一枚,却因为不懂自己生产上Redis是如何部署的,导致面试失败! 人间惨 ...

  6. es原理

    一:  一个请求到达es集群,选中一个coordinate节点以后,会通过请求路由到指定primary shard中,如果分发策略选择为round-robin,如果来4个请求,则2个打到primary ...

  7. LeetCode 64. 最小路径和(Minimum Path Sum) 20

    64. 最小路径和 64. Minimum Path Sum 题目描述 给定一个包含非负整数的 m x n 网格,请找出一条从左上角到右下角的路径,使得路径上的数字总和为最小. 说明: 每次只能向下或 ...

  8. java抽象类及接口

    Java抽象类: 抽象类特点:抽象类除了不能实例化对象之外,类的其它功能依然存在,成员变量.成员方法和构造方法的访问方式和普通类一样. 由于抽象类不能实例化对象,所以抽象类必须被extends [抽象 ...

  9. Java串口通信 RXTX 解决过程

    背景介绍: 由于第一次用Java与硬件通信,网上查了许多资料,在这进行整理,便于以后学习.本人串口测试是USB串口设备连接电脑,在设备管理器中找到端口名称(也可以通过一些虚拟串口工具模拟). 下面主要 ...

  10. @Scheduled注解各参数详解

    @Scheduled注解各参数详解 @Scheduled注解的使用可以参考这个:https://www.cnblogs.com/mengw/p/11564338.html 参数详解 1. cron 该 ...