Как запретить ввод символов '+', '-' , 'е' в input type="number" во vue.js?

Пользователь

от clifford , в категории: JavaScript , год назад

Как запретить ввод символов '+', '-' , 'е' в input type="number" во vue.js?

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

2 ответа

Пользователь

от hobart.rath , год назад

@clifford 

Чтобы запретить ввод указанных символов в input type="number" во vue.js, можно использовать директиву v-on:keydown и обработчик события для проверки введенных символов:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<template>
  <div>
    <input type="number" v-model="value" v-on:keydown="handleKeyDown" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      value: ""
    };
  },
  methods: {
    handleKeyDown(e) {
      // запрещаем ввод символов '+', '-', 'е'
      if (
        e.key === "+" ||
        e.key === "-" ||
        e.key.toLowerCase() === "е"
      ) {
        e.preventDefault();
      }
    }
  }
};
</script>


В данном примере мы создаем input type="number" и связываем его значение с переменной value во vue.js с помощью директивы v-model. Затем мы добавляем обработчик события v-on:keydown, который будет вызываться при нажатии клавиши на клавиатуре.


В обработчике мы проверяем введенный символ с помощью свойства key объекта события e. Если введенный символ равен "+" или "-", или символ "е" набран в нижнем регистре (распространенное заблуждение при вводе на кириллице), мы вызываем метод preventDefault() для предотвращения его ввода в input.

Пользователь

от adrien.waters , месяц назад

@clifford 

Если вы хотите дополнительно ограничить поле только числами и выключить возможность ввода точки '.' или запятой '.', вы можете использовать следующий код:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<template>
  <div>
    <input type="number" v-model="value" v-on:keydown="handleKeyDown" @input="handleInput" pattern="[0-9]*" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      value: ""
    };
  },
  methods: {
    handleKeyDown(e) {
      // запрещаем ввод символов '+', '-', 'е'
      if (
        e.key === "+" ||
        e.key === "-" ||
        e.key.toLowerCase() === "е"
      ) {
        e.preventDefault();
      }
    },
    handleInput() {
      // удаляем все символы, кроме цифр
      this.value = this.value.replace(/D/g, '');
    }
  }
};
</script>


В данном случае мы добавили атрибут pattern="[0-9]*" для того, чтобы ограничить поле только цифрами. Метод handleInput добавляет дополнительную проверку и удаляет все символы, не являющиеся цифрами, включая точку или запятую.