VueJ를 사용하여 숫자 입력을 방지하는 방법s

VueJ를 사용하여 숫자 입력을 방지하는 방법s

사용자가 텍스트 상자에 숫자 입력을 입력하지 못하도록 하는 유효성 검사를 만들어야 한다.나는 네이티브 자바스크립트를 사용하여 해결책을 찾았지만 내 쪽에서 효과가 없다.

내 텍스트 상자에는 이 트리거가 있다.

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

그리고 나의 부에 나는 우리 반에 함수를 만들었다.

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();
    }
}

당신은 이것과 함께 나를 도와줄수 있나요?

제 댓글에서 언급했듯이,keyup값이 입력 필드에 입력되는 것을 막기 위해 너무 늦게 발사될 것이다.예를 들어 동일한 값을 반복해서 입력하기 위해 키를 누른 채로 있는 경우를 생각해 보십시오. 키를 위로 올리지 마십시오.

대신, 사용keydown또는keypress

<input @keypress="preventNumericInput">

데모 - http://jsfiddle.net/wadt08jm/1/

• 입력은 형식 번호여야 하며 그렇지 않으면 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
      }
    }
  }

참조URL: https://stackoverflow.com/questions/50828016/how-can-i-prevent-numeric-inputs-using-vuejs