Javascript JQuery - 实时复制字段输入文本
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4061489/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
JQuery - Duplicate Field Input Text In Real Time
提问by logic-unit
I'm trying to figure out how to copy a users text input in one form field to another. Specifically, when someone fills in their email address in the contact form, it will be duplicated in the mailing list form.
我想弄清楚如何将一个表单字段中的用户文本输入复制到另一个。具体来说，当有人在联系表单中填写他们的电子邮件地址时，它会在邮件列表表单中重复。
Both these forms are using ajax so there's no concerns about the input text being lost on submit.
这两个表单都使用 ajax，因此不必担心提交时丢失输入文本。
This is the code I have:
这是我的代码：
<div id="contact_form">
<form name="contact" method="post" action="">
<input type="text" name="name" id="name" size="30" value="Name" class="text-input" />
<label class="error" for="name" id="name_error">Please enter your name.</label>
<br />
<input type="text" name="email" id="email" size="30" value="Email" class="text-input" />
<label class="error" for="email" id="email_error">I need your email.</label>
<br />
<textarea rows="10" cols="30" type="textarea" name="message" id="message" value="Message" class="text-input" ></textarea>
<label class="error" for="message" id="message_error">A message is required.</label>
<br />
<input type="submit" name="submit" class="button" id="submit" value="Send" />
</form>
</div>
<div id="details">
<p>some details here, not sure what yet</p>
</div>
<div id="mail_list">
<input type="text" id="mail" value="Your email" name="mail_list" /><input type="submit" name="submit" class="button" id="submit" value="Send" />
</div>
I found this in the Jquery documentation, but couldn't get it to work:
我在 Jquery 文档中找到了这个，但无法让它工作：
$("#email").optionCopyTo("#mail");
Thanks!
谢谢！
回答by user113716
You said you want it in real time. I assume that means while the user is typing, the value should be replicated for each keystroke.
你说你想要它实时。我认为这意味着当用户打字时，应该为每次击键复制该值。
If that's right, try this:
如果是这样，试试这个：
var mail = document.getElementById("mail");
$("#email").keyup(function() {
mail.value = this.value;
});
Or if you want more jQuery:
或者，如果您想要更多 jQuery：
var $mail = $("#mail");
$("#email").keyup(function() {
$mail.val( this.value );
});
This will update for each keyupevent.
这将针对每个keyup事件进行更新。
I'd probably add a redundant blurevent in case there's an autocomplete in the field.
blur如果现场有自动完成功能，我可能会添加一个冗余事件。
$("#email").blur(function() {
$mail.val( this.value );
});
回答by Peter Ajtai
Since all your fields have unique ids, this is quite straight forward:
由于您的所有字段都有唯一的 ID，因此非常简单：
$(function() { // <== Doc Ready
$("#email").change(function() { // When the email is changed
$('#mail').val(this.value); // copy it over to the mail
});
});
Try it out with this jsFiddle
用这个 jsFiddle 试试
回答by mikel
Is $("#mail") another input box ? It doesn't appear in your HTML (Edit: well it does now, but didn't at first :)
$("#mail") 是另一个输入框吗？它没有出现在您的 HTML 中（编辑：现在确实出现了，但一开始没有出现 :)
$("#mail").val($("#email").val())should do what you want.
$("#mail").val($("#email").val())应该做你想做的。
回答by Muhammad Tahir
use keyup and change both.
使用 keyup 并更改两者。
$("#boxx").on('keypress change', function(event) {
var data=$(this).val();
$("div").text(data);
});
here is the example http://jsfiddle.net/6HmxM/785/
回答by kobe
you can simply do this
你可以简单地做到这一点
$('#mail').text($('#email').val())
