Немедленно реагируйте на изменения textarea в Dart

У меня есть это в моем HTML-файле:

<textarea id="inputbox" placeholder="type here"></textarea>

Как правильно подключить обработчик, который будет срабатывать немедленно при изменении содержимого текстовой области? (будь то клавиатура, мышь / буфер обмена, речевой ввод, устройство чтения мозговых волн и т. д.)

Я старался:

  query("#inputbox").on.change.add(handler)

но (по крайней мере на Dartium) он срабатывает только после того, как вы вышли из поля.

Цель состоит в том, чтобы обновить окно "предварительного просмотра", подобно тому, как Stackru отображает вывод Markdown при вводе.

Источник

2 ответа

Это лучшее, что я придумал до сих пор. Я был бы рад услышать, если кто-нибудь знает о более компактной или предпочтительной альтернативе.

Изменить: фрагмент кода обновлен до нового шаблона для регистрации событий.

import 'dart:html';

void main() {
  query("#inputbox")
    ..onChange.listen(handler)
    ..onKeyDown.listen(handler)
    ..onKeyUp.listen(handler)
    ..onCut.listen(handler)
    ..onPaste.listen(handler);
}

void handler(Event event) {
  print((query("#inputbox") as TextAreaElement).value);
}

Точное поведение зависит от браузера и операционной системы.

Вы могли бы пропустить keyDown, но имейте в виду, что поведение keyDown и keyUp зависит от ОС и не обязательно будет симметричным. Вы можете пропустить изменение, по крайней мере, до следующего события keyUp или change. На самом деле я доказал это, создав небольшое приложение на Windows 7, которое отправит потерянное сообщение WM_KEYDOWN в Dartium и IE9.

keyPress может использоваться вместо keyUp и keyDown, но не будет генерировать события для определенных ключей, таких как backspace и delete.

cut а также paste немедленно реагировать на порез или пасту, выполненную с помощью мыши. Если вы не используете их, change событие фиксирует изменение, но только после того, как поле теряет фокус, а иногда даже позже.

input Событие может заменить всех слушателей, указанных выше, и, похоже, отлично работает в Dartium, но в IE9 оно только фиксирует добавление символов, а не удаление.

Заметка keyUp а также keyDown может генерировать дополнительные нежелательные события для клавиш курсора, home, end, shift и т. д. (например, в IE9). Он будет срабатывать в дополнение к слушателям вырезания / вставки, когда пользователь использует для этих действий горячие клавиши.

Хотя этот вопрос относится к Dart, большая часть приведенного выше обсуждения относится к любому коду, слушающему DOM. Даже значения keyCode не стандартизированы в разных браузерах ( более подробно).

Может также стоить проверить класс KeyboardEventController, хотя в целом, когда я тестировал его, поведение пограничного случая было похоже на то, что отмечалось выше. Это может или не может быть по замыслу. Разработчики Dart прилагают некоторые усилия, чтобы оградить вас от несоответствий между браузерами, но это все еще в стадии разработки.

Кроме того, пока мы говорим о textarea, не забудьте использовать его value свойство, а не его текстовое свойство. Наконец, убедитесь, что ваш handler регулирует свою реакцию на "всплески" активности клавиатуры (например, какой-то таймер, который на короткое время задерживает кишки вашего обработчика и сворачивает любые дополнительные события, которые происходят в это время).

Связанные вопросы и ссылки:

Источник

Непонятно, используете ли вы полимер или нет, но если это так, вы можете подписаться на изменение переменной, помеченной @observable, создав функцию в элементе полимера в виде [имя переменной] Изменено (oldvalue). Первоначально я нашел это здесь: Как подписаться на изменение наблюдаемого поля

Источник
Другие вопросы по тегам