vue限制输入框数字只能输入正整数的指令(direct) v-int

// 限制输入框数字只能输入正整数的指令 v-int
export default (Vue) => {
  // 通过Vue的指令方法,定义指令名称
  Vue.directive("Int", {
    // bind绑定 获取当前目标的input(就是在哪个文本框上使用指令)
    bind: function (el) {
      const input = el.getElementsByTagName("input")[0];
      if (input) {
        // 调用input方法,加入正则校验的逻辑
        input.onkeyup = function (e) {
          if (input.value.length === 1) {
            input.value = input.value.replace(/[^0-9]/g, "");
          } else {
            input.value = input.value.replace(/[^\d]/g, "");
          }
          // 调用自定义事件
          trigger(input, "input");
        };
        input.onblur = function (e) {
          if (input.value.length === 1) {
            input.value = input.value.replace(/[^0-9]/g, "");
          } else {
            input.value = input.value.replace(/[^\d]/g, "");
          }
          trigger(input, "input");
        };
      }
    },
  });
  // 创建自定义事件
  const trigger = (el, type) => {
    const e = document.createEvent("HTMLEvents");
    // 初始化默认值
    e.initEvent(type, true, true);
    // 触发自定义事件
    el.dispatchEvent(e);
  };
};
  • 0
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值