zoukankan      html  css  js  c++  java
  • [转载]vue指令的一些常规操作,比如只能输入正整数

    我们做项目经常会遇到,只能输入正整数,看到一篇挺不错的自定义指令,转载下来

    首先想到的是设置type="number" ? 但是如果想限制长度,设置maxLength就会失效,如果vue项目上通过js去校验长度又太麻烦

    并且type="number" 还存在的一个问题是,当输入的是小数时,鼠标悬停在input上会提示“请输入有效值,两个最接近的值为0和1”,还有有些input框回车导致光标偏上等等

    那我们现在来设置type="text",通过指令控制文本框只能输入正整数

    根据keypress事件,监视键盘keyCode码,结合数字正则表达式 判断键入的keyCode是否是数字,如果非数字则调用preventDefault事件阻止默认行为
    代码中的正则使得只能输入0-9,其他所有的字符都无法输入
     
    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;
              }                            
          }
        });
      }
    });
    
    只能输入正数(包含小数)

    这个指令是在上面指令上做的修改,即允许输入小数点,但是如果单纯的允许输入小数点,那就会造成输入1.1....1....1...1这种无数小数点的情况,所有这里的处理方式是如果小数点是第一次输入则放行,但是在下次按下键盘上的小数点keyCode 时会对输入的value值进行判断,如果value值存在小数点,则调用preventDefault() 阻止事件


    Vue.directive('enterNumber2', {
      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(charcode == 46){
            if(el.value.includes('.')){
              e.preventDefault();
            }
            return;
          }else if(!re.test(String.fromCharCode(charcode)) && charcode > 9 && !e.ctrlKey){
            if(e.preventDefault){
              e.preventDefault();
            }else{
                e.returnValue = false;
            }
          }
        });
      }
    });
    

     

    使用方法

    将上诉代码放在main.js中,然后在input框上添加自定义指令,注意自定义指令要以v-开头,并且驼峰命名要写在小写的形式
    注:这时候的input框type只需要使用text类型就可以了,不要使用number类型,不然会出现“请输入有效值,两个最接近的值为0和1”

    <input type="text" v-enter-number2 >

    转载链接:https://www.jianshu.com/p/ce451ef75fa0

      

  • 相关阅读:
    [剑指Offer]59-队列的最大值(题目二待补)
    [Java学习]面向对象-package;内部类;UML图表示六种关系
    已安全化的ActiveX控件卸载时出现"DllUnregisterServer函数出错,错误代码:0x80070002"问题解决
    Win10 启动64位IE浏览器——修改注册表方法
    系统托盘弹出通知或气泡
    LPCTSTR 字符串获取其长度
    ActiveX控件获取不到对象属性或者方法的原因分析
    时钟周期 VS 机器周期
    VS2017 ATL创建ActiveX编程要点
    incremental linking(增量链接)的作用
  • 原文地址:https://www.cnblogs.com/zwp06/p/14047075.html
Copyright © 2011-2022 走看看