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,""); //清除"数字" ...
随机推荐
- mysql 中不等于过滤 null 的问题(同时比较等于,大于和小于)
在写 SQL 条件语句是经常用到 不等于'!='的筛选条件,此时要注意此条件会将字段为 null 的数据也当做满足不等于的条件而将数据筛选掉. 1.原始数据和表结构 CREATE TABLE `tes ...
- 热修复干货| AndFix热补丁动态修复框架使用教程
本篇文章会与大家一起学习使用阿里的AndFix热修复框架,可以说AndFix是国内热修复技术的开山始祖,尽管现在阿里已经放弃了对这个项目的维护,但是后来很多的热修复技术都借鉴了这一框架的实现思路. 1 ...
- 十分钟教会你使用安卓热修复框架AndFix
腾讯最近开发出一个Tinker,阿里也有一个Dexposed框架,当然还有一个就是今天的主角热修复框架AndFix.接下来,我会从它的概念.原理.使用方法等为你详细介绍. 1.什么是AndFix? A ...
- 配置jdbc问题 mysql与IDEA
1.新建lib文件夹,将jar文件导入 2在structure中添加jar文件 3设置url时需要设置时区: import java.sql.Connection;import java.sql.Dr ...
- [转帖]MyCat教程【简单介绍】
MyCat教程[简单介绍] 2019-10-15 10:27:23 波波烤鸭 阅读数 618 版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明. ...
- Redis搭建Windows平台
安装程序下载 从官网下载安装程序. https://redis.io/download https://github.com/MicrosoftArchive/redis/releases 新地址:h ...
- oracle的jdbc的版本与jdk对应关系
连接类型:1. JDBC OCI: oci是oracle call interface的缩写,此驱动类似于传统的ODBC 驱动.因为它需要Oracle Call Interface and Net8, ...
- matplotlib笔记3
关于matplotlib的绘制图形的基本代码,我们可以参照下面的连接 https://matplotlib.org/gallery/index.html https://matplotlib.org/ ...
- netty--处理器
编解码器的基类: 编码:MessageToByteEncode 解码:ByteToMessageDecoder
- C++ 去掉字符串的首尾空格和全部空格
#include <iostream>#include <string>using namespace std; //去掉收尾空格string& ClearHeadTa ...