vue:el-input输入时限制输入的类型操作

通过@keyup.native的时间动态监控输入的类型

1.手机号码,只能是数字,如果输入了非数字直接清空

2.身份证号码,除了Xx和数字其余的一律清空

3.基于1.2两种情况下,还有一种是动态创建的字段(也就是v-for出来的),解决方法:先使用split形成字段数组,使用for循环找到最后一个点的前面的字段,方便使用$set更新和渲染页面

setDelMsicStr(field,type){
   let props
   let len
   let value
   let newphoestr
   let item = this
   if (field) {
    props = field.split('.')
    len = props.length
    for (let i = 0; i < len - 1; i++) {
     item = item[props[i]]
    }
    if(type=="phone"){
     newphoestr = (item[props[len - 1]]).replace(/([^0-9])+/g, '')
    }else if(type=='idCard'){
     newphoestr = (item[props[len - 1]]).replace(/([^0-9Xx])+/g, '')
    }
    this.$set(item, props[len - 1], newphoestr)
   }
  },

重点:也是使用this.$set()时必须的点

    for (let i = 0; i < len - 1; i++) {
     item = item[props[i]]
    }

表格限制输入的数字长度,超过限定值,直接显示9999

          <el-form-item prop="activStoreSellPrice">
           <el-input type="number" @keyup.native="setRange('form.prdctStoreList.'+scope.$index+'.activStoreSellPrice',99999,0)" v-model.number="scope.row.activStoreSellPrice" :disabled="disabled" min="0" max="99999999"></el-input>
          </el-form-item>

重点：

表格的需要获取到行的index(scope.$index)

@keyup.native="setRange('form.prdctStoreList.'+scope.$index+'.activStoreSellPrice',99999,0)"

补充知识：elementUI + vue 输入框只能输入正整数 不能输入字母 e 以及+ - 号

看代码吧~

<el-input :inline="true" v-model="dialogForm.closeTime" onKeypress="return(/[\d]/.test(String.fromCharCode(event.keyCode)))" type="number"></el-input>

以上这篇vue:el-input输入时限制输入的类型操作就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 浅谈vue限制文本框输入数字的正确姿势

    最近遇到一个需求,需要限制文本框输入数字,而number类型的输入框有箭头,个人不是很喜欢,因此想要寻求其它途径实现.本想通过网上找个现成的插件,然而百度,谷歌一番都没有找到满意的答案,至于随手一搜出来的方案或多或少都有点缺陷.因此自己动手,丰衣足食. 事件选型 首先我们很容易想到通过事件来达到目的,大致可以通过以下几个事件来实现: keypress/keydown 思路:按键按下的时候触发,通过判断按下的是否是数字返回true/false来限制用户的输入. 缺点:无法限制用户复制粘贴的数据.

  • Element Input输入框的使用方法

    本文来源于Element官方文档: http://element-cn.eleme.io/#/zh-CN/component/input 基础用法 带图标的输入框(属性方式) <el-input placeholder="请选择日期" suffix-icon="el-icon-date" v-model="input2"> </el-input> <el-input placeholder="请输入内容&q

  • Vue ElementUI实现:限制输入框只能输入正整数的问题

    input输入框中禁止输入小数和负数(*只允许输入正整数 *) 最近在做项目中碰见了这么个问题,需要输入数字,但是只能输入正整数,在网上找的没找到自己想要的,所以就自己想了两个办法,在这里跟大家分享一下.(因为是刚毕业,第一次写博客,所以有点生疏,请各位大佬担待一些) 方法一:利用禁止按键的方法,主要是依靠禁止按下减号以及小数点来完成的 首先要监听keyup(键盘按下)事件,因为elementUi上面的input组件监听事件是没有这个事件的,所以可能会报错,所以我们需要加个vue事件的修饰符 .

  • Vue动态控制input的disabled属性的方法

    Vue动态控制input的disabled属性的方法

    有时候会有这样的需求,新增的时候可以输入,但是无法修改,此时就需要通过控制input标签的disabled属性来实现,那vue是如何动态设置input输入框的disabled属性的呢? 输入框的html源代码 <el-input v-model="dataForm.name" placeholder="配置项" v-bind:disabled="dataForm.id"></el-input> 新增~ 通过F12查看实际页

  • vue:el-input输入时限制输入的类型操作

    通过@keyup.native的时间动态监控输入的类型 1.手机号码,只能是数字,如果输入了非数字直接清空 2.身份证号码,除了Xx和数字其余的一律清空 3.基于1.2两种情况下,还有一种是动态创建的字段(也就是v-for出来的),解决方法:先使用split形成字段数组,使用for循环找到最后一个点的前面的字段,方便使用$set更新和渲染页面 setDelMsicStr(field,type){ let props let len let value let newphoestr let ite

  • Vue实现input宽度随文字长度自适应操作

    业务需求,输入文字,后面的元要紧随其后,奈何input默认是有宽度,我想要达到,输入文字,动态改变input的宽度,试了很多方法,目前自己琢磨一种,有遇到问题的可以参考一下, 直接贴代码 <div class="textcontain"> <input type="text" v-model.number="item.cardComboMoney" maxlength="5" placeholder=&quo

  • vue 清空input标签 中file的值操作

    template中: <input type="file" ref="pathClear" @change="onUpload" name="file" id="file"> methods中: onUpload(){ this.$refs. pathClear.value ='' }, 补充知识:将input file的选择的文件清空的两种解决方案 上传文件时,选择了文件后想清空文件路径,搜索

  • Vue触发input选取文件点击事件操作

    CSS .upload-btn-box { margin-bottom: 10px; button { margin-right: 10px; } input[type=file] { display: none; } } HTML <div class="upload-btn-box"> <Button @click="choiceImg" icon="ios-cloud-upload-outline" type="

  • vue 限制input只能输入正数的操作

    在某些项目中 input 框只能输入数字,可以用以下办法: 先在标签上绑定上 @input 事件来监听标签的值变化,通过正则来改变输入的值. <input class="keep_input" v-number-only style="width:35px" v-model="scope.row.fileOrder" @input="scope.row.fileOrder = Number($event.target.value.

  • vue实现input输入模糊查询的三种方式

    vue实现input输入模糊查询的三种方式

    目录 1 计算属性实现模糊查询 2 watch 监听实现模糊查询 3 通过按钮点击实现模糊查询 1 计算属性实现模糊查询 vue 中通过计算属性实现模糊查询,创建 html 文件,代码直接放入即可. 这里自己导入 vue,我是导入本地已经下载好的. <script src="./lib/vue-2.6.12.js"></script> 演示: 打开默认显示全部 输入关键字模糊查询,名字和年龄都可以 完整代码如下: <!DOCTYPE html> &l

  • vue判断input输入内容全是空格的方法

    比如input中的数据和data中的msg双向绑定. 那么我们可以  判断先把msg以空格拆分成数组,然后拼接起来,判断字符串的长度,如果长度为0,证明输入的就全是空格了,如下: msg.split(" ").join("").length = 0 以上这篇vue判断input输入内容全是空格的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们. 您可能感兴趣的文章: vue获取input输入值的问题解决办法 详解.vue文件中监听in

  • vue中input框的禁用和可输入问题

    目录 input框的禁用和可输入 关于输入框的一些操作 input框的禁用和可输入 input是我们经常使用的文本输入框,在vue中我们可以用v-model来绑定输入框的值,但是有时我们拿到一个值并通过v-model绑定到一个input框里,但是我们只想要显示这个值,不能修改,然后在某些特定的情况下在去改变这个值,这个时候就牵涉到文本框的禁用了    <input       type="text"//绑定的值       v-model="Copy.possWord1

  • 基于vue 实现表单中password输入的显示与隐藏功能

    实现效果: 点击 "眼睛" 的时候显示与隐藏 代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link href="css/bootstrap.min.css" rel="external nofollow" rel="stylesheet">

  • JavaScript判断输入是否为数字类型的方法总结

    JavaScript判断输入是否为数字类型的方法总结 前言 很多时候需要判断一个输入是否位数字,下面简单列举集中方法. 第一种方法 isNaN isNaN 返回一个 Boolean 值,指明提供的值是否是保留值 NaN (不是数字). NaN 即 Not a Number isNaN(numValue) 但是如果numValue果是一个空串或是一个空格,而isNaN是做为数字0进行处理的,而parseInt与parseFloat是返回一个错误消息,这个isNaN检查不严密而导致的. 第二种方法

随机推荐