Sincronizar 2 campos de entrada, ¿se puede hacer usando jQuery?

Question

¿Puede jQuery sincronizar o copiar el texto de un campo de entrada a otro cuando se modifica la entrada A? Por ejemplo:

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

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

¿Puede jQuery hacer esto?

Answer 1

Prueba esto:

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

para jQuery 1.7+ usar on:

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

Example fiddle

– Actualización Agosto 2017 –

The input event is now well supported, por lo que puede utilizar en lugar de combinar ambos keyup y eventos 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" />

Answer 2

Durante la escritura, pegando, se copiarán etc valor. En jQuery < 1.7 en su lugar on use bind.

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

Answer 3

Sí, puede hacerlo. Obligar al pulsar una tecla o evento keyup y copiar el valor:

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

O, si sólo desea que el valor que va a copiar después de que el usuario ha terminado de editarlo, utilice el evento desenfoque con el mismo controlador. Esto tiene la ventaja adicional de que si el usuario pega texto en input_A, también se copiará en input_B.

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

Aquí hay una working example with keyup y one with blur.

Answer 4

respuesta tardía, pero prefiero esta manera, ya que no requiere de múltiples identificadores de elemento:

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

Garrett