仅接受数字的 Vue 输入

Question

I'd like a text input to accept only a sequence of numbers. Any other char should be ignored silently. Here's a simplified version of my component:

<template>
  <div id="app">
    <input :value="tel" @input="setTel" placeholder="only numbers" />
    <p>{{ tel }}</p>
  </div>
</template>

<script>
export default {
  name: "App",
  data: () => ({
    tel: "1234"
  }),

  methods: {
    setTel(v) {
      const val = v.target.value.replace(/[^0-9]/g, "");
      this.tel = val;
      /*this.tel = v.target.value = v.target.value.replace(/[^0-9]/g, "");*/
    }
  }
};
</script>

In React, there's the concept of controlled components , but I can't seem anything similar in Vue.

The workaround I found (which you can see in comments) is to modify the value of the input element manually, but it kind of defeats the purpose of using Vue.

I've also tried using v-model , but the issue remains.

codesandbox.

Answer 1

<template>
  <div id="app">
    <input v-model="tel" v-on:keyup="setTel" placeholder="only numbers" />
    <p>{{ tel }}</p>
  </div>
</template>

<script>
export default {
  name: "App",
  data: () => ({
    tel: "1234"
  }),

  methods: {
    setTel(v) {
      const val = v.target.value.replace(/[^0-9]/g, "");
      this.tel = val;
      /*this.tel = v.target.value = v.target.value.replace(/[^0-9]/g, "");*/
    }
  }
};
</script>

I took a look at your sandbox and made a few modifications, Please check to see if this is what you want, the view is now updated.

Answer 2

well you can use <input type=number... like every one said here but if you want to handle manually than what you can do is change your el.target.value in handler like

<template>
  <div id="app">
    <input
      :value="tel"
      @input="setTel"
      placeholder="0"
    />
    <p>{{ tel }}</p>
  </div>
</template>

<script>
export default {
  name: "App",
  data: () => ({
    tel: "1234"
  }),

  methods: {
    setTel(v) {
      v.target.value = v.target.value.replace(/[^0-9]/g, "");
      this.tel = v.target.value
      /*this.tel = v.target.value = v.target.value.replace(/[^0-9]/g, "");*/
    }
  }
};
</script>

and for the part where vue is showing text in your input is because when you assign same value after replacing text vue doesn't refresh the state of that particular element to avoid extra rendering

Answer 3

Instead of handling keyup (which would allow the key to reach the input), you should handle keydown . The handler should call event.preventDefault() and event.stopPropagation() to ignore the key:

// ignore non-numeric keys
if (!/\d/.test(v.key)) {
  v.preventDefault()
  v.stopPropagation()
  return false
}

The input should allow meta keys through (eg to allow copy-paste or delete ):

// allow all meta keys (including Backspace) to pass through
if (v.metaKey || /(Backspace|Meta)/g.test(v.key)) {
  console.log('ignoring', v.key)
  return
}

In addition, this input should handle the input event in order to filter copy-pasted values.

// template
<input v-model="tel" @input="onInput" v-on:keydown="setTel" />

// script
onInput(e) {
  if (e.inputType !== 'insertText' && /[^0-9]/g.test(e.target.value)) {
    const val = e.target.value.replace(/[^0-9]/g, "");
    this.tel = val;
    e.preventDefault()
    e.stopPropagation()
    return false
  }
}

demo

Answer 4

There a couple of things you can do:

• set the input's type to number <input type=number . This will block the user from entering any character except number. This is handled by the browser.
• you can use v-model and also add a listener @change to check the value and modify the model accordingly. Node that you can add the number modifier on the model so vue casts the input to a number `
• use a validation framework like vuelidate

Answer 5

You answered your own question by setting the value on the input with the "workaround". If you wanted it to work just like React Controlled Components, you could just set the target input's value to the value from the data model unless it actually changes the data model. In this manner, the Vue data model would be your single source of truth.

<template>
  <div id="app">
    <input 
      v-bind:value="tel" 
      v-on:input="handleInputTel" 
      placeholder="only numbers" 
    />
    <p>{{ tel }}</p>
  </div>
</template>

<script>
export default {
  name: "App",
  data: () => ({
    tel: "1234"
  }),

  methods: {
    handleInputTel(v) {
      if (validate(v.target.value)) this.tel = v.target.value; 
      else v.target.value = this.tel;
    }
  }
};
</script>

Answer 6

Because the strategy of VUE to render, if the state is not different with old, this input component do not re render. But the input DOM had changed. So, you can use $forceUpdate on input event.

setTel(v) {
      const val = v.target.value.replace(/[^0-9]/g, "");
      this.tel = val;
      this.$forceUpdate();
    }