美文网首页
vue设置el-input禁止输入特殊字符,只可输入数字

vue设置el-input禁止输入特殊字符,只可输入数字

作者: 前端阿峰 | 来源:发表于2021-04-04 08:59 被阅读0次

    有时候使用Element-ui组件时,根据需求需要设置输入框只能输入数字的效果,我们可以通过下面的代码实现,代码如下:

    <template>
        <el-input
            v-model="value"
            placeholder="请输入"
            @keyup.native="keyUp"
            @keydown.native="keydown"
         ></el-input>
    </template>
    <script>
      export default {
          methods:{
          //限制输入特殊字符
            keyUp(e) {
               e.target.value = e.target.value.replace(/[`~!@#$%^&*()_\-+=<>?:"{}|,.\/;'\\[\]·~!@#¥%……&*()——\-+={}|《》?:“”【】、;‘’,。、]/g,"");
              },
               // 只能输入汉字、英文、数字
            keydown(e) {
               e.target.value = e.target.value.replace(/[^\a-\z\A-\Z0-9\u4E00-\u9FA5]/g,"");
              }
        }
    }
    </script>
    
    //只能输入数字
      e.target.value = e.target.value.replace(/[^\d]/g,"");
    

    相关文章

      网友评论

          本文标题:vue设置el-input禁止输入特殊字符,只可输入数字

          本文链接:https://www.haomeiwen.com/subject/hephkltx.html