JQuery - 实时重复的字段输入文本

Question

我试图找出如何将用户文本输入在一个表单字段中复制到另一个表单字段.具体来说,当有人填写联系表单中的电子邮件地址时,它将在邮件列表表单中重复.

这两种形式都使用ajax,因此不必担心输入文本在提交时丢失.

这是我的代码:

    <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>

我在Jquery文档中找到了这个,但无法使它工作:

$("#email").optionCopyTo("#mail");

谢谢!

Answer 1

你说你想要它实时.我认为这意味着在用户输入时,应该为每次击键复制该值.

如果是的话,试试这个:

var mail = document.getElementById("mail");

$("#email").keyup(function() {
    mail.value = this.value;
});

或者如果你想要更多的jQuery:

var $mail = $("#mail");

$("#email").keyup(function() {
    $mail.val( this.value );
});

这将针对每个keyup事件进行更新.

blur如果现场有自动填充,我可能会添加一个冗余事件.

$("#email").blur(function() {
    $mail.val( this.value );
});

Answer 2

由于您的所有字段都具有唯一ID,因此这非常简单:

$(function() {                                       // <== Doc Ready
    $("#email").change(function() {                  // When the email is changed
        $('#mail').val(this.value);                  // copy it over to the mail
    });
});

尝试使用这个jsFiddle

.change()
.val()