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

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. const的用法及它在C语言和C++中的不同

    (1)可以定义const常量. (2)Const可以修饰函数的参数和返回值,甚至定义体.被const修饰的东西都受到强制保护. (3)Const修饰成员函数时,用于成员函数前面,则返回值不能作为左值. ...

  2. qbittorrent搜索在线插件

    https://raw.githubusercontent.com/khensolomon/leyts/master/yts.py https://raw.githubusercontent.com/ ...

  3. Python 环境搭建(Win 安装以及Mac OS 安装)

    千里之行始于足下,今天我们先来学习 Python 环境搭建. 注意:本系列教程基于 Python 3.X Python 环境搭建 Win 安装 打开 Python 官网 https://www.pyt ...

  4. 036 Android Xutils3网络请求框架使用

    1.xUtils3 介绍 xUtils 中目前包括了主要的四大模块,分别为 DbUtils 模块.ViewUtils 模块.HttpUtils 模块以及 BitmapUtils 模块. xUtils3 ...

  5. NGINX---一次阿里云宝塔开发flask经历

    1.放行端口问题 不但需要在阿里云官网服务器控制台放行端口,还需要在宝塔里面放行端口 2.nginx 宝塔默认的用户是www 句法: user user [group]; 默认: 用户无人; 语境: ...

  6. PAT(B) 1068 万绿丛中一点红(C)

    题目链接:1068 万绿丛中一点红 (20 point(s)) 参考博客:1068. 万绿丛中一点红(20) i逆天耗子丶 题目描述 对于计算机而言,颜色不过是像素点对应的一个 24 位的数值.现给定 ...

  7. WUSTOJ 1336: Lucky Boy(Java)博弈

    题目链接:1336: Lucky Boy 参考博客:LUCKY BOY 博弈--HandsomeHow Description Recently, Lur have a good luck. He i ...

  8. Mongodb命令行导入导出数据

    第一步,找到mongodb安装目录第二步,从命令行进入mongodb安装目录下的bin目录第三步(1),导出数据命令(导出的文件有两种格式:json/csv,此处导出的是json文件,对于导出CSV文 ...

  9. vue防止闪屏小技巧:[v-cloak]

    css 内添加此属性[v-cloak] { display: none; } html中引入即可 <div v-cloak> {{ message }} </div> 如果觉得 ...

  10. O(1) gcd 板子

    const int N = 2e5+10; const int M = 500; int cnt, p[N], _gcd[M][M]; int v[N][3],vis[N]; int gcd(int ...