2010-02-18 24 views
10

Supongamos que se realiza una entrada en un cuadro de texto. ¿Es posible retener el mismo texto ingresado en un segundo cuadro de texto? Si es así, ¿cómo se hace?Copiar contenidos de un cuadro de texto a otro

<html> 
<label>First</label><input type="text" name="n1" id="n1"> 
<label>Second</label><input type="text" name="n1" id="n1"/> 
</html> 

Gracias.

Respuesta

28
<script> 
function sync() 
{ 
    var n1 = document.getElementById('n1'); 
    var n2 = document.getElementById('n2'); 
    n2.value = n1.value; 
} 
</script> 
<input type="text" name="n1" id="n1" onkeyup="sync()"> 
<input type="text" name="n2" id="n2"/> 
+0

Gracias ......................... – Hulk

+0

simple, simultáneo, perfecto! – Drew

+0

Puede generalizar esta función agregando dos parámetros: el 'input_field' (que normalmente pasaría como' this') y la cadena que representa el id del elemento al que desea copiar. Entonces puedes reemplazar la variable n1 con 'input_field'. –

3
<html> 
<script type="text/javascript"> 
function copy() 
{ 
    var n1 = document.getElementById("n1"); 
    var n2 = document.getElementById("n2"); 
    n2.value = n1.value; 
} 
</script> 
<label>First</label><input type="text" name="n1" id="n1"> 
<label>Second</label><input type="text" name="n2" id="n2"/> 
<input type="button" value="copy" onClick="copy();" /> 
</html> 
2

Bueno, tiene dos cuadros de texto con la misma identificación. Una Id debe ser única, por lo que debes cambiar esto de forma prudente.

para establecer el valor de un cuadro de texto a otro debería ser suficiente una simple llamada a getElementById():

document.getElementById("n1").value= document.getElementById("n2").value; 

(suponiendo, por supuesto le da a su cuadro de texto secodn un id de n2)

Tie Haga clic en este botón hasta hacer clic para que funcione.

+1

'.value' te refieres a escribir allí, ¿no? –

2

Esto funcionó para mí y que no utiliza JavaScript:

<form name="theform" action="something" method="something" /> 
<input type="text" name="input1" onkeypress="document.theform.input2.value = this.value" /> 
<input type="text" name="input2" /> 
</form> 

I found the code here

+2

Técnicamente, eso _se_utiliza Javascript, pero tienes razón en que no tienes que importar un script separado para poder hacerlo. –

5

Más eficiencia con que se puede realizar como: para el que va a ver el mensaje debe ahora usa las mejores prácticas de javascript.

<script> 
function sync(textbox) 
{ 
    document.getElementById('n2').value = textbox.value; 
} 
</script> 
<input type="text" name="n1" id="n1" onkeyup="sync(this)"> 
<input type="text" name="n2" id="n2"/> 
+0

¡Voto por utilizar las mejores prácticas! –

1

Use el evento "oninput". Esto le da un comportamiento más robusto. También activará la función de copia al copiar pegar.

+1

¿Podría agregar un ejemplo de esto? –

Cuestiones relacionadas