3

Quisiera copiar los datos de un campo a otro en el mismo formulario, al momento, sin tener que hacer otra acción. Algo parecido a un keylogger y lo que escriba en un campo se vaya insertando en otro campo al mismo tiempo. Se puede? gracias

<form action="procesar" method="POST">
    <div class="col1">
      <input type="text" name="content" required>
    </div>
    <div class="col1">
      <input type="text" name="content1" required>
    </div>
</form>

Para que cuando se haya terminado de escribir en el campo content se tenga el mismo contenido en el campo content1 al mismo tiempo

4
  • Lo que tienes que hacer es crear un codigo JavaScript o Jquery que escuche el evento del campo y lo reproduzca en el otro campo Commented el 30 sept. 2019 a las 15:54
  • Podrías explicarme un poco más? Soy nuevo en el desarrollo web, gracias
    – Chris
    Commented el 30 sept. 2019 a las 15:56
  • ok te hago la explicacion Commented el 30 sept. 2019 a las 16:16
  • Te lo agradezco mucho :)
    – Chris
    Commented el 30 sept. 2019 a las 16:17

1 respuesta 1

3

Como te lo han comentado, esto es mediante javascript o lo puedes lograr también con jquery, jquery es una librería que ofrece las mismas funcionalidades que javascript pero es más amigable.

Te dejo un ejemplo de como puedes lograrlo: https://jsfiddle.net/L9atcrk0/

Desde este link puedes descargar/utilizar la librería de jquery: https://code.jquery.com/

Además desde aquí puedes ver algunos eventos que se utilizan en algunos elementos html relacionados al teclear: https://api.jquery.com/category/events/keyboard-events/

Te recomiendo hacer la mayoría de búsquedas en ingles, así encontrarás más información.

Te incluyo el código en caso que desaparezca de la página:

$(document).ready(function(){
	$("input[name=content]").keyup(function(){
  	$("input[name=content1]").val(this.value);
  });
});
<!DOCtype>
<html>
  <head></head>
  <body>
  <form action="procesar" method="POST">
    <div class="col1">
      <input type="text" name="content" required>
    </div>
    <div class="col1">
      <input type="text" name="content1" required>
    </div>
</form>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.1/jquery.min.js"></script>
  </body>
</html>

6
  • El código de jquery en dónde se debe de poner? Una disculpa, soy nuevo en esto :) Gracias
    – Chris
    Commented el 30 sept. 2019 a las 16:24
  • 1
    Excelente, muchas gracias por el aporte. en cuanto al codigo Jquery lo colocas debajo del <script> que llama a la libreria, en otro bloque <script> Commented el 30 sept. 2019 a las 16:34
  • Aún no puedo hacer funcionar la solución, creen que se deba a {{csrf_field()}}?
    – Chris
    Commented el 30 sept. 2019 a las 16:56
  • Tengo mi etiqueta <head> con el script que viene en el link que escribió Ernesto y debajo de esa última, en otra etiqueta de script, tengo el primer bloque de código que escribió. Estoy haciéndolo bien? @AlexanderRodriguez
    – Chris
    Commented el 30 sept. 2019 a las 17:00
  • 1
    Tambien te puede servir, lo importante es que siempre declares primero la libreria JQuery y despues puedes usar el codigo Commented el 30 sept. 2019 a las 17:18

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.