Por ejemplo, en una entrada como esta:
<head> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous"> </head> <body> <div class="container"> <div class="form-group my-2"> <input class="form-control mx-2" type="text" placeholder="Customer Name"> </div> <div class="form-group mb-2"> <input class="form-control mx-2" type="email" placeholder="Customer Email"> </div> <div class="form-group mb-2"> <input class="form-control mx-2" type="text" placeholder="Customer pin"> </div> <div class="form-group mb-2"> <textarea class="form-control mx-2" rows="4"> Hi, {customer Name here} Your Email is: {customer Email here} Your Pin is: {customer pin here} </textarea> </div> </div> </body> Hi, John Doe Your Email is: johndoe@mail.com Your Pin is: 123¿Cómo autocompletaría el área de texto con los datos que ingresó el usuario?
Necesitas usar JavaScript. Construirá su contenido de área de texto completo a partir de los valores ingresados cada vez que se actualicen. Como esto:
// Input elements var customerName = document.getElementById("customer-name"); var customerEmail = document.getElementById("customer-email"); var customerPin = document.getElementById("customer-pin"); // Output textarea var customerInfo = document.getElementById("customer-info"); function updateTextareaContent(){ customerInfo.value=`Hi, ${customerName.value||"(enter name)"} Your Email is: ${customerEmail.value||"(enter email)"} Your Pin is: ${customerPin.value||"(enter pin)"}`; } customerName.addEventListener("keydown", updateTextareaContent); customerEmail.addEventListener("keydown", updateTextareaContent); customerPin.addEventListener("keydown", updateTextareaContent); customerName.addEventListener("keyup", updateTextareaContent); customerEmail.addEventListener("keyup", updateTextareaContent); customerPin.addEventListener("keyup", updateTextareaContent); <!DOCTYPE html> <html> <head> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous"> </head> <body> <div class="container"> <div class="form-group my-2"> <input class="form-control mx-2" type="text" placeholder="Customer Name" id="customer-name"> </div> <div class="form-group mb-2"> <input class="form-control mx-2" type="email" placeholder="Customer Email" id="customer-email"> </div> <div class="form-group mb-2"> <input class="form-control mx-2" type="text" placeholder="Customer pin" id="customer-pin"> </div> <div class="form-group mb-2"> <textarea class="form-control mx-2" rows="4" id="customer-info"> Hi, (enter name) Your Email is: (enter email) Your Pin is: (enter pin) </textarea> </div> </div> </body> </html>(El fragmento es un poco grande, por lo que está contraído, haga clic en la flecha para abrirlo)
Esto busca cambios en el texto, y cuando esos cambios ocurren, actualiza el área de texto.
Aquí hay algunas lecturas adicionales para comprender mejor el fragmento de código:
Oyentes de eventos en w3schools
Literales de plantilla en MDN