如何防止使用VueJS输入数字

zvms9eto 于 2023-03-09 发布在 Vue.js

关注(0)|答案(3)|浏览(164)

我需要创建一个验证，防止用户输入的文本框中的数字输入。我发现一些解决方案使用本机javascript，但它是不是在我这边的工作。
在我的文本框中有一个触发器

v-on:keyup="preventNumericInput($event)">

在我的Vue上我创建了一个类函数

preventNumericInput($event) {
    console.log($event.keyCode); //will display the keyCode value
    console.log($event.key); //will show the key value

    var keyCode = ($event.keyCode ? $event.keyCode : $event.which);
    if (keyCode > 47 && keyCode < 58) {
        $event.preventDefault();
    }
}

你能帮我一下吗？

vue.js

来源：https://stackoverflow.com/questions/50828016/how-can-i-prevent-numeric-inputs-using-vuejs

3条答案

按热度按时间

2fjabf4q1#

正如我在评论中提到的那样，keyup的触发太晚，无法阻止值输入到输入字段中，例如，考虑按住某个键重复输入同一个值;没有键“向上”。
请改用keydown或keypress

<input @keypress="preventNumericInput">

演示~ http://jsfiddle.net/wadt08jm/1/

赞(0）回复(0）举报 2023-03-09

iqjalb3h2#

输入必须是类型编号，否则isNaN将不起作用

<input type="number" :value="price" step="0.1" min="0" @input="onInput($event)" >

将输入中“，”替换为.“”
如果不是数字则测试
如果不是数字，则用要素价值代替可观察价格

data () {
    return { price: 0 }
  },
  methods: {
    onInput (e: Event) {
      const element = e.target as HTMLInputElement
      const value = parseFloat(element.value === '' ? '0' : element.value.replace(',', '.'))
      if (isNaN(value)) {
        element.value = this.price.toString()
      } else {
        this.price = value
      }
    }
  }

赞(0）回复(0）举报 2023-03-09

mjqavswn3#

在Vue 3中，当输入类型为数字特征时，可通过使用指令修改输入元素的行为来关闭滚动更改。指令如下：

beforeMount(el, binding, vnode, prevVnode) {
  el.addEventListener('wheel', (event) => {
    if (el.type === 'nunmber') {
        el.blur()
        event.preventDefault()
      }
    },
    { passive: false }
)},
unmounted(el, binding, vnode, prevVnode) {
 document.body.removeEventListener('wheel', (event) => {
   el.blur()
   event.preventDefault()
 })
}

赞(0）回复(0）举报 2023-03-09

我来回答

如何防止使用VueJS输入数字

3条答案

相关问题

热门标签

最新问答