Event.preventDefault не работает, когда я ввожу cjk (корейский) для числового типа v-text-field - PullRequest
Новая
       10

Event.preventDefault не работает, когда я ввожу cjk (корейский) для числового типа v-text-field

0 голосов
/ 09 июля 2020

Я работаю над проектом vue, и это исправление небольшой ошибки. Но это меня так усложняет.

Я сделал v-текстовое поле, в которое вводятся только числа, и, похоже, оно работает хорошо. 

<v-text-field type="number">

И я хочу ввести только число, поэтому я использую событие keydown для использования preventDefault. 

<v-text-field type="number" @keydown="testKeydown">

testKeydown(event) {
  if(event.key !== "1" && ... && event.key !== "Delete" && event.key !== "Backspace") {
    console.log("Wrong Input!!!");
    event.preventDefault();
  }
}

Этот код может предотвратить ввод экспоненциального значения 'e', ​​'E' и '+', '.'.

Но он может не мешает корейскому языку (возможно, CJK), например, «ㅁ». (Когда я ввожу корейский язык, event.key возвращает «Процесс») и «Ввод неверный !!!» регистрируется моя Chrome консоль.

Кроме того, значение v-text-field, отображаемое на экране, равно «123 ㅁ», но значение event.target.value, взятого с console.log (event ) равно "".

Я хочу запретить ввод корейских символов (или CJK) или немедленно удалить их, даже если они вводятся без удаления 'type = "number"'.

Что я могу для этого сделать?

1 Ответ

0 голосов
/ 09 июля 2020

Это называется композицией, это происходит в определенном IME, когда вам нужно ввести несколько штрихов перед составлением одного символа.

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

Таким образом, у вас нет другого выбора, кроме как дождаться завершения этой композиции, а затем удалить неверные вводы. И лучше всего для этого, вероятно, прослушать событие input. (Ps: в любом случае вы можете предпочесть проверку входного значения вместо тестирования всех event.key, по крайней мере, чтобы поймать вставленный контент.)

...