Synchonise 2, можно ли это сделать с помощью jQuery?

Может ли jQuery синхронизировать или копировать текст одного поля ввода в другое, когда изменяется вход A? Например:

<input id="input_A" type="text" /> ...If I type something here

<input id="input_B" type="text" /> ... It will be copied here

Может ли jQuery сделать это?

Ответы

Ответ 1

Попробуйте следующее:

$("#input_A").bind("keyup paste", function() {
    $("#input_B").val($(this).val());
});

Для jQuery 1.7+ используйте on:

$("#input_A").on("keyup paste", function() {
    $("#input_B").val($(this).val());
});

Пример скрипта

– Обновите август 2017 г. –

Событие input теперь хорошо поддерживается, поэтому вы можете использовать это вместо объединения как keyup, так и paste события:

$("#input_A").on("input", function() {
  $("#input_B").val(this.value);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="input_A" type="text" />
<input id="input_B" type="text" />

Ответ 2

Во время записи, копирования и т.д. значение будет скопировано. В jQuery < 1.7 вместо on используйте bind.

$( "#input_A" ).on( "paste keyup", function() { 
     $( "#input_B" ).val( $( this ).val() );
});

Ответ 3

Да, это возможно. Привяжите событие нажатия клавиши или keyup и скопируйте значение:

$('#input_A').keyup(function() {
    $('#input_B').val($(this).val());
});

Или, если вы хотите, чтобы значение было скопировано после того, как пользователь закончил его редактирование, используйте событие размытия с тем же обработчиком. Это имеет дополнительное преимущество: если пользователь вставляет текст в input_A, он также будет скопирован в input_B.

$('#input_A').blur(function() {
    $('#input_B').val($(this).val());
});

Здесь рабочий пример с keyup и один с blur.

Ответ 4

Поздний ответ, но я предпочитаю этот путь, так как он не требует нескольких идентификаторов элементов:

$('input.sync').on('keyup paste', function() {
     $('input.sync').not(this).val($(this).val());
});

Гаррет