Как очистить вводимое значение при нажатии какой-либо кнопки?

Я пытаюсь очистить ввод, когда пользователь нажимает запятую (,). Итак, я сделал следующее: на (keypress) я бы проверил keyCode, и если бы это была запятая, я бы очистил ввод, установив для него значение input.value = ''.

HTML:

<input type = "text" #elem (keypress) = "clearInput($event)">

Код:

@ViewChild( 'elem' ) public element;

clearInput( e: KeyboardEvent ) {
 if ( e.keyCode === 44 ) {
    this.element.nativeElement.value = '';
 } else {
   console.info('Not a comma');
 }
}

javascript html dom-events

08.08.2018 12:46

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

1 406

Перейти к ответу Данный вопрос помечен как решенный

Ответы 3

Просто return false, если нажата запятая:

class HomeComponent {
  @ViewChild('elem') public element;
  clearInput(e: KeyboardEvent) {
    if (e.keyCode === 44) {
      this.element.nativeElement.value = '';
      return false;
    } else {
      console.info('Not a comma');
    }
  }
}

JSFiddle: https://jsfiddle.net/lucakiebel/zrehcwfy/1/

08.08.2018 12:48

Вам нужно сделать 2 небольших изменения:

Используйте событие keyup, чтобы получить последний набранный ключ и включить его в значение input
Используйте e.key === ',' в состоянии if

Вот рабочий JSFIDDLE

08.08.2018 12:50

Ответ принят как подходящий

Use Event.preventDefault().

Добавьте preventDefault() в свой код clearInput, как показано ниже:

clearInput (e: KeyboardEvent) {
   if (e.keyCode === 44) {
      e.preventDefault();     // <-- Here
      this.element.nativeElement.value = '';
   } else {
      console.info('Not a comma');
   }
}

Вы можете добавить некоторые пояснения: вставка запятой будет запускаться тем же событием "keyup", что и ваш код. Но браузер должен сначала запустить ваш код, поскольку ваш слушатель не является пассивным (он может предотвратитьDefault () или вернуть false), поэтому событие нажатия клавиши сначала запустит ваш слушатель (очистите поле), а затем слушатель по умолчанию (вставив запятую в пустое поле). Другими решениями могут быть keyUp или отметка вашего слушателя пассивный. - Но preventDefault () наиболее идиоматичен для вашего случая.

— 08.08.2018 16:12

08.08.2018 12:54