在 Vue.js 中使用指令的输入字段仅接受数值答案

【问题标题】：Input Field Only Accepting Numeric Value Using Directive In Vue.js在 Vue.js 中使用指令的输入字段仅接受数值
【发布时间】：2018-02-09 07:25:33
【问题描述】：

我是 Vue.js 的新手。我想要一个只接受数字的输入字段，如果用户输入任何其他值，它将被替换为空字符串。因此，我想向该字段添加一个自定义指令，即“numericOnly”。

自定义指令代码：

Vue.directive('numericOnly', {
  bind (el, binding, vnode) {
    regex = /^[0-9]*$/
    if(!regex.test(el.value)){
     el.value = el.value.slice(0, -1)
    }
  }
})

这是我的模板：

<input v-numericOnly name="mobileNumber" placeholder="Mobile Number" >

但它只在输入字段绑定到 DOM 时运行一次。

请帮我解决这个问题。提前谢谢你。

【问题讨论】：

标签： javascript vue.js vuejs2

【解决方案1】：

你的指令应该监听输入元素的keyup 来实现你所需要的：

Vue.directive('numericOnly', {
  bind(el) {
    el.addEventListener('keyup', () => {
      let regex = /^[0-9]*$/
      if (!regex.test(el.value)) {
        el.value = el.value.slice(0, -1)
      }
    })
  }
})

【讨论】：

说说你的代码是如何回答操作问题的？
@ShreeKhanal，我加了一点:)
谢谢@BobDust。在这种情况下，我们必须在解除绑定时删除Listner。
在这种情况下，此元素上的 v-model 没有得到更新。

【解决方案2】：

import Vue from 'vue'    
Vue.directive('numericOnly', {
bind(el, binding, vnode) {
    el.addEventListener('keydown', (e) => {
        if ([46, 8, 9, 27, 13, 110, 190].indexOf(e.keyCode) !== -1 ||
            // Allow: Ctrl+A
            (e.keyCode === 65 && e.ctrlKey === true) ||
            // Allow: Ctrl+C
            (e.keyCode === 67 && e.ctrlKey === true) ||
            // Allow: Ctrl+X
            (e.keyCode === 88 && e.ctrlKey === true) ||
            // Allow: home, end, left, right
            (e.keyCode >= 35 && e.keyCode <= 39)) {
            // let it happen, don't do anything
            return
        }
        // Ensure that it is a number and stop the keypress
        if ((e.shiftKey || (e.keyCode < 48 || e.keyCode > 57)) && (e.keyCode < 96 || e.keyCode > 105)) {
            e.preventDefault()
        }
    })
}

})

【讨论】：

防止用户在文本框中写入字符只允许数字，例如，如果您有一个年龄文本框并希望用户只写数字
演示上述代码的工作示例jsfiddle.net/AnasRezk/roLtf9wq
您可以输入 1.......... 或 ..........，所以不是真正的解决方案。或 1.1.1.1.1..1