Синхронизация идентичных форм html

Question

Я хотел бы иметь две (или даже более) идентичные html-формы на моем сайте.
Например, один - вверху, а другой - в нижней части страницы.
Я хочу, чтобы у них был точно такой же контент в любой момент времени. Если пользователь изменяет значение в одном из них, все остальные обновляются.
Есть ли лучший способ синхронизации javascript onchange/onkeyup событий?
onchange стреляет только после того, как элемент теряет фокус.
onkeyup также не идеален. Он тратит много процессора на длительное копирование текста и не срабатывает, если элемент потерял фокус между событиями onkeydown и onkeyup.

Answer 1

Обновление: Я только что узнал, что для этого HTML5 есть более подходящее событие, oninput, но, конечно же, оно не работает в старых браузерах. oninput обнаружит любое изменение текста, включая Paste, Cut и Delete в меню правой кнопки мыши. Таким образом, лучшим вариантом может быть проверка, поддерживает ли браузер oninput (например, с помощью рекомендованной функции here), возвращаясь к методу ниже, если нет. В более старых версиях IE onpropertychange может использоваться для имитации oninput.

---

Я решил изменить свой ответ на основе того, как KnockoutJS выполняет это. Из this page в Knockout документы:

«afterkeydown» - обновляет модель представления, как только пользователь начинает вводить характер. Это работает, улавливая событие keydown браузера и обрабатывая событие асинхронно.

Из этих вариантов «afterkeydown» - лучший выбор, если вы хотите сохранить свою модель обзора в режиме реального времени.

Выполняет асинхронное поведение с использованием setTimeout с нулевым значением времени. Кроме этого, он выглядит как обычный обработчик события keydown.

Вот простой пример, используя JQuery, который я считаю, ведет себя равносильно «afterkeydown» событие KNOCKOUT в:

$('#email').keydown(function() { 
    setTimeout($.proxy(handler, this), 0); 
}); 

function handler() { 
    console.log(this.value); 
} 

Примечание: Это не поймаешь правой кнопкой мыши пастообразных события и события перетаскивания и падение , Если вы хотите обновить текст на этих событиях тоже просто слушать их в том же порядке, как KeyDown, например:

$('#email').on('keydown paste drop', function() { 
    setTimeout($.proxy(handler, this), 0); 
}); 

Как keydown, paste и drop также нуждаются в setTimeout для обновления с последним значением текста.

Оригинальный ответ:

onkeyup, вероятно, путь, но вы поднимаете хороший момент об этом не стрелять, если элемент теряет фокус между KeyDown и KeyUp.Основываясь на this answer, я уверен, что решение будет состоять в том, чтобы прослушать событие keyup на элемент контейнера (или на теле, хотя в этом случае, вероятно, было бы наиболее целесообразно связать его с элементом <form>).

Что касается использования процессора при вставке, вы можете попробовать отменить событие, если не прошло определенного времени (скажем, 50 мс) ... надеюсь, этого будет достаточно. Если нет, вы можете посмотреть, как некоторые из популярных двухсторонних структур привязки данных справляются с этим ... большинство из тех, что я видел, используют onkeyup.