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,""); //清除"数字" ...
随机推荐
- 安卓app和苹果app共用一个二维码
应项目要求,现在安卓app和苹果app共用一个二维码,对外提供下载: <html> <head> <meta http-equiv="Content-Type& ...
- 性能测试监控:Jmeter+Collectd+Influxdb+Grafana
系统性能指标图示例: 采集数据(collectd)-> 存储数据(influxdb) -> 显示数据(grafana) InfluxDB 是 Go 语言开发的一个开源分布式时序数据库,非常 ...
- jupyter notebook选择conda环境
需要安装: conda install ipykernel 使用:首先激活对应的conda环境 source activate 环境名称 将环境写入notebook的kernel中 python -m ...
- 如何理解MVC
在面试的时候,MVC这个概念考的次数很多,有许多人只能把三个字母解释成三个单词:model,view,controller,但是如果往深处说就说不出来什么东西了,对这个概念模糊不清,今天闲来无事看了一 ...
- CSS的三种基本框架
CSS的三类选择器 1.css-css的基本选择器(三种) 要对哪个标签里面的数据进行操作 (1)标签选择器 div { background-color:red; color:blue; } (2) ...
- 从零开始学Flask框架-006
重定向和用户会话 因为刷新页面时浏览器会重新发送之前已经发送过的最后一个请求.如果这个请求是一个包含表单数据的POST 请求,刷新页面后会再次提交表单. 基于这个原因,最好别让Web 程序把POST ...
- 小程序的目录结构/配置介绍/视图层wxml数据绑定/双线程模型/小程序的启动流程
安装好微信小程序开发软件,创建项目 小程序文件结构和传统web对比 结构 传统web 微信小程序 结构 HTML WXML 样式 CSS WXSS 逻辑 Javascript Javascript 配 ...
- 十九、eMMC驱动框架分析
一.MMC简介 eMMC在封装中集成了一个控制器,提供标准接口并管理Nand Flash,使得手机厂商就能专注于产品开发的其它部分,并缩短向市场推出产品的时间. 对于我们来说,eMMC就是在Nand ...
- Linux命令格式及7个常见终端命令
Linux命令格式 Linux常见的7个终端命令
- 使用Jenkins编译打包SpringCloud微服务中的个别目录
意义说明: 使用Jenkins从Gogs拉取SpringCloud微服务,拉取的是整个仓库的内容,分好多个模块文件夹,但是使用maven编译打包的话只编译打包指定的模块文件夹 Gogs Webhook ...