当输入文本字段被填充时，如何使文本区域中的默认值更改/自动填充？
[英]How to make default value in the textarea change/autofill when the input text field is filled?
问题描述
For example on input like this:
例如在这样的输入上：
<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>
- When the Customer Name input is entered: John Doe输入客户名称时：John Doe
- When the Customer Email input is entered: johndoe@mail.com输入客户 Email 输入时：johndoe@mail.com
- When the Customer pin input is entered: 123输入客户密码输入时：123
Then the textarea value should become那么textarea值应该变成
Hi, John Doe
Your Email is: johndoe@mail.com
Your Pin is: 123
How would I autofill the textarea with the data that the user inputted?如何使用用户输入的数据自动填充文本区域？
1 个解决方案
解决方案1
1 已采纳 2022-08-02 03:57:18
You need to use JavaScript.您需要使用 JavaScript。 It will build your complete textarea content from the inputted values whenever they are updated.每当更新时，它将根据输入的值构建完整的文本区域内容。 Like this:像这样：
// 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>
(The snippet is a bit large so it is collapsed, click the arrow to open it) （片段有点大所以被折叠了，点击箭头打开它）
This watches for changes in the text, and when those changes happen, it updates the textarea.这会监视文本的变化，当这些变化发生时，它会更新 textarea。
Here's some further reading in order to more better understand the code snippet:为了更好地理解代码片段，这里有一些进一步的阅读：
Event Listeners on w3schools
w3schools 上的事件监听器Template Literals on MDN
MDN 上的模板文字
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.