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

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. 安卓app和苹果app共用一个二维码

    应项目要求,现在安卓app和苹果app共用一个二维码,对外提供下载: <html> <head> <meta http-equiv="Content-Type& ...

  2. 性能测试监控:Jmeter+Collectd+Influxdb+Grafana

    系统性能指标图示例: 采集数据(collectd)-> 存储数据(influxdb) -> 显示数据(grafana) InfluxDB 是 Go 语言开发的一个开源分布式时序数据库,非常 ...

  3. jupyter notebook选择conda环境

    需要安装: conda install ipykernel 使用:首先激活对应的conda环境 source activate 环境名称 将环境写入notebook的kernel中 python -m ...

  4. 如何理解MVC

    在面试的时候,MVC这个概念考的次数很多,有许多人只能把三个字母解释成三个单词:model,view,controller,但是如果往深处说就说不出来什么东西了,对这个概念模糊不清,今天闲来无事看了一 ...

  5. CSS的三种基本框架

    CSS的三类选择器 1.css-css的基本选择器(三种) 要对哪个标签里面的数据进行操作 (1)标签选择器 div { background-color:red; color:blue; } (2) ...

  6. 从零开始学Flask框架-006

    重定向和用户会话 因为刷新页面时浏览器会重新发送之前已经发送过的最后一个请求.如果这个请求是一个包含表单数据的POST 请求,刷新页面后会再次提交表单. 基于这个原因,最好别让Web 程序把POST ...

  7. 小程序的目录结构/配置介绍/视图层wxml数据绑定/双线程模型/小程序的启动流程

    安装好微信小程序开发软件,创建项目 小程序文件结构和传统web对比 结构 传统web 微信小程序 结构 HTML WXML 样式 CSS WXSS 逻辑 Javascript Javascript 配 ...

  8. 十九、eMMC驱动框架分析

    一.MMC简介 eMMC在封装中集成了一个控制器,提供标准接口并管理Nand Flash,使得手机厂商就能专注于产品开发的其它部分,并缩短向市场推出产品的时间. 对于我们来说,eMMC就是在Nand ...

  9. Linux命令格式及7个常见终端命令

    Linux命令格式 Linux常见的7个终端命令

  10. 使用Jenkins编译打包SpringCloud微服务中的个别目录

    意义说明: 使用Jenkins从Gogs拉取SpringCloud微服务,拉取的是整个仓库的内容,分好多个模块文件夹,但是使用maven编译打包的话只编译打包指定的模块文件夹 Gogs Webhook ...