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?

jQuery plugin for synchronising the values of two fields: https://github.com/ain/jquery-fieldsync — Ain Tohvri, Feb 14 '13 at 22:44

Rory McCrossan · Accepted Answer · 2017-08-31T07:32:22.643

26

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" />

edited Aug 31 '17 at 07:32

answered Jan 10 '12 at 12:40

Rory McCrossan

331,213
40
305
339

1

Don't forget the `paste` event – Ilia G Jan 10 '12 at 12:41
Just missing the opening bracket for `$this)`. – jabclab Jan 10 '12 at 12:42
2

One small note: if you're using jQuery 1.7 or later, it's recommended to use the `on` function instead of the `bind` function. – FishBasketGordo Jan 10 '12 at 16:51
What if you had 12 inputs you wanted to sync up, would you use 12 different ids? See my answer for a more flexible method. – grimmdude Jun 07 '16 at 20:00

score 7 · Answer 2 · answered Jun 07 '16 at 19:59

7

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

answered Jun 07 '16 at 19:59

grimmdude

374
4
7

2

I prefer this answer, 'cause the synchronization in this case is a two-way. – Boolean_Type Dec 05 '19 at 09:05
2

way better than the acccepted value, this allows syncing multiple inputs that share the same class name. thanks! – eballeste Mar 06 '20 at 18:46

abuduba · Answer 3 · 2012-01-10T12:47:13.197

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() );
});

edited Jan 10 '12 at 12:47

answered Jan 10 '12 at 12:41

abuduba

4,986
7
26
43

The `focus` is unnecessary and `keydown` happens before value changed. Rory has it correctly. – Ilia G Jan 10 '12 at 12:46

FishBasketGordo · Answer 4 · 2012-01-10T12:47:06.117

Yes, it can. Bind a keypress or keyup event and copy over the value:

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

Or, if you only want the value to be copied after the user is finished editing it, use the blur event with the same handler. This has an added advantage that if the user pastes text into input_A, it also will be copied into input_B.

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

Here's a working example with keyup and one with blur.

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

4 Answers4

Linked