Блог

Главная - Вопросы по программированию - Ограничить количество символов при вводе типа number

Ограничить количество символов при вводе типа number

#html #angular

#HTML #угловой

Вопрос:

Я использую угловой материал с реактивной формой, где у меня есть поле ввода типа number. Я хочу ограничить значение, которое пользователь может ввести в текстовое поле, от 1 до 99. Я могу добиться этого, но я вижу значение в течение доли секунд после нажатия клавиши, а затем значение сокращается, поскольку я написал логику среза внутри события ввода. Я пытался написать эту логику в keypress, но, похоже, она не работает. Я пытался использовать event.stopPropogation() и preventDefault, но безуспешно. Ниже приведен код:

 <input type="number"
          matInput
          min="1"
          max="99"
          #tempVar
          autocomplete="off"
          formControlName="noOfWeeks"
          (keyup)="imposeMinMax(tempVar)"
          (keypress)="numericOnly($event)"
        />

TS-файл

   numericOnly(e): boolean {
   return e.keyCode === 8 amp;amp; e.keyCode === 46 
   ? true
   : !isNaN(Number(e.key));
  }

  imposeMinMax(el) {
      if (
        el.value != '' amp;amp;
        (parseInt(el.value) < parseInt(el.min) ||
          parseInt(el.value) > parseInt(el.max))
      ) {
          el.value = el.value.toString().slice(0, 2);
        }
      }

Комментарии:

1. нажатие клавиши: устарело Эта функция больше не рекомендуется. Хотя некоторые браузеры все еще могут поддерживать его, он может быть уже удален из соответствующих веб-стандартов, может быть в процессе удаления или может быть сохранен только в целях совместимости. Избегайте его использования и по возможности обновите существующий код; смотрите таблицу совместимости внизу этой страницы, чтобы принять решение. Имейте в виду, что эта функция может перестать работать в любое время. developer.mozilla.org/en-US/docs/Web/API/Document /…

2. Вы могли бы создать директиву, это был бы лучший способ

Ответ №1:

Я могу предложить подход, который использует keydown событие:

     <input type="number"
              matInput
              min="1"
              max="99"
              #tempVar
              autocomplete="off"
              formControlName="noOfWeeks"
              (keydown)="handleKeydown($event)"
            />
 
 handleKeyDown(e) {
    const typedValue = e.keyCode;
    if (typedValue < 48 amp;amp; typedValue > 57) {
      // If the value is not a number, we skip the min/max comparison 
      return;
    }

    const typedNumber = parseInt(e.key);
    const min = parseInt(e.target.min);
    const max = parseInt(e.target.max);
    const currentVal = parseInt(e.target.value) || '';
    const newVal = parseInt(typedNumber.toString()   currentVal.toString());

    if (newVal < min || newVal > max) {
      e.preventDefault();
      e.stopPropagation();
    }
  }

Конечно, этот handleKeyDown метод может быть расширен в зависимости от ваших требований.

Метки: