Synchonise 2 input fields, can it be done using jQuery?

Question

Can jQuery synchronise or copy the text of one input field to another when input A is modified? For example:

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

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

Can jQuery Do this?

Answer 1

Try this:

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

For jQuery 1.7+ use on:

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

Example fiddle

– Update August 2017 –

The input event is now well supported, so you can use that in place of combining both keyup and paste events:

$("#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" />

Answer 2

Late answer, but I prefer this way since it doesn't require multiple element ids:

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

Garrett

Answer 3

During writing, pasting, etc value will be copied. In jQuery < 1.7 instead on use bind.

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