Как запретить ввод символов '+', '-' , 'е' в input type="number" во vue.js?
2 ответа
@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.
@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 добавляет дополнительную проверку и удаляет все символы, не являющиеся цифрами, включая точку или запятую.