¿Cómo sincronizar dos valores de formulario de cuadro de texto?

Question

Hola a todos soy nuevo en jQuery. Supongamos que tengo dos cuadros de texto HTML. ¿Cómo puedo hacer que suceda que si escribo en el cuadro de texto A, entonces el mismo valor va al cuadro de texto B y si escribo en B, entonces va a A y lo mismo que borrar el texto. ¿Cómo se puede hacer esto en jQuery?

Answer 1

Esta es una forma más dinámica:

<input class="copyMe" type="text" /> 
<input class="copyMe" type="text" /> 
<input class="copyMe" type="text" /> 
<input class="copyMe" type="text" /> 

Y el código:

$(document).ready(function(){ 
    $(".copyMe").keyup(function(){ 
     $(".copyMe").val($(this).val()); 
    }); 
}); 

Demostrar del concepto: http://jsfiddle.net/MQXCt/

Answer 2

Esto es bastante fácil:

$("#textBoxA").keyup(function(){ 
    $("#textBoxB").val($("#textBoxA").val()); 
}); 

$("#textBoxB").keyup(function(){ 
    $("#textBoxA").val($("#textBoxB").val()); 
}); 

Answer 3

Vas a tener que poner una llamada en función onchange eventos de cada cuadro de texto, que tendrá el valor de una caja y lo puso en el otro.

Answer 4

Utilizando el método de Snicksie, se puede ver la demostración en vivo a continuación. He incluido un botón para restablecer los valores de la caja de texto también.

http://jsfiddle.net/refhat/qX6qS/5/

Answer 5

Una forma un poco más eficiente que la respuesta más upvoted es:

var $inputs = $(".copyMe"); 
$inputs.keyup(function() { 
    $inputs.val($(this).val()); 
}); 

http://css-tricks.com/snippets/jquery/keep-text-inputs-in-sync/

Answer 6

me encontré con este desafío en la actualidad. Hice un pequeño complemento para hacer que el código sea más legible y para manejar las entradas de texto, pero también seleccioné fe.

Al incluir el plugin, sólo tiene que utilizar $("selector").keepInSync($("otherselector"));

$.fn.keepInSync = function($targets) { 
 
    // join together all the elements you want to keep in sync 
 
    var $els = $targets.add(this); 
 
    $els.on("keyup change", function() { 
 
    var $this = $(this); 
 
    // exclude the current element since it already has the value 
 
    $els.not($this).val($this.val()); 
 
    }); 
 
    return this; 
 
}; 
 

 
//use it like this 
 
$("#month1").keepInSync($("#month2, #month3")); 
 
$("#text1").keepInSync($("#text2"));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<h1>Two way sync</h1> 
 
<select id="month1"> 
 
    <option value="">Please select a moth</option> 
 
    <option value="jan">January</option> 
 
    <option value="feb">February</option> 
 
    <option value="mar">March</option> 
 
</select> 
 
<select id="month2"> 
 
    <option value="">Please select a moth</option> 
 
    <option value="jan">1</option> 
 
    <option value="feb">2</option> 
 
    <option value="mar">3</option> 
 
</select> 
 
<select id="month3"> 
 
    <option value="">Please select a moth</option> 
 
    <option value="jan">Jan</option> 
 
    <option value="feb">Feb</option> 
 
    <option value="mar">Mar</option> 
 
</select> 
 
<br> 
 
<input type="text" id="text1"> 
 
<input type="text" id="text2">