vue自定义指定实现input只能输入正整数

问题:vue项目中如果想让一个input只能输入正整数,那么需要写一个键盘监听事件对这个input处理,但是如果有很多input需要这样处理,又或者想封装一下,怎样实现比较方便又实用?

解决办法:方便以后的使用,就需要封装一个自定义指定来的方便,就像v-if类似,实用自定就可以实现

步骤:1

1、创建drectives.js

  代码:注册v-Int 自定义指令

import Vue from 'vue'
export default () => {
  Vue.directive('Int', {
    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 (el.value.length === 0 && charcode === 48) {
          if (e.preventDefault) {
            e.preventDefault()
          } else {
            e.returnValue = false
          }
        } else {
          if (!re.test(String.fromCharCode(charcode)) && charcode > 9 && !e.ctrlKey) {
            if (e.preventDefault) {
              e.preventDefault()
            } else {
              e.returnValue = false
            }
          }
        }
      })
    }
  })
}

2、main.js引入

import drectives from '@/utils/drectives'
Vue.use(drectives)

3、使用 v-Int

<input type="tel" v-model="money" placeholder="请输入提现金额"  @input="inputHandler" v-Int>

4、会出现中文输入的问题,下面是解决办法及其全部代码

import Vue from 'vue'
export default () => {
  Vue.directive('Int', {
    inserted: function (input) {
      input.addEventListener('keypress', function (e) {
        let charcode = typeof e.charCode === 'number' ? e.charCode : e.keyCode
        let re = /\d/
        if (input.value.length === 0 && charcode === 48) {
          if (e.preventDefault) {
            e.preventDefault()
          } else {
            e.returnValue = false
          }
        } else {
          if (!re.test(String.fromCharCode(charcode)) && charcode > 9 && !e.ctrlKey) {
            if (e.preventDefault) {
              e.preventDefault()
            } else {
              e.returnValue = false
            }
          }
        }
      })
      input.onblur = function (e) {
        if (input.value.length === 1) {
          input.value = input.value.replace(/[^1-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)
}

οnkeyup="value=value.replace(/[^\d]/g,'')"

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值