封装 v-vue-onkeypress 指令-优快云博客

本文介绍了一种实现输入框仅允许输入数字的方法，并提供了一个可复用的Vue指令，解决了火狐浏览器兼容性问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在开发项目的过程中，遇到一个常见的需求，输入框只能输入数字，最开始的时候是这样写的

后发现不兼容火狐浏览器，于是修改成

经测试，没有问题了，由于使用的地方较多，便萌生了封装一个指令的想法，代码如下

onkeypress.js

import {checkNumber} from '../../utils/util'

export default {
  bind: function (el,binding) {
    el.onkeypress = function(e){
      return checkNumber(e)
    }
  }
}

验证数字函数 util.js

export function checkNumber(e) {
  let ev = e || event;
  return (/[\d]/.test(String.fromCharCode(ev.keyCode || ev.which))) || ev.which === 8
}

index.js

import VueOnkeypress from './onkeypress.js'

const install = function(Vue) {
  Vue.directive('VueOnkeypress', VueOnkeypress)
}

if (window.Vue) {
  window.VueOnkeypress = VueOnkeypress
  Vue.use(install);
}

VueOnkeypress.install = install
export default VueOnkeypress

最后在main.js注册全局指令

import VueOnkeypress from 'src/directive/onkeypress/index'


Vue.directive('VueOnkeypress', VueOnkeypress);

然后就阔以使用了

end