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
    });
});

Try it out with this jsFiddle

.change()
.val()

Answer 3

$（“＃mail”）是另一个输入框吗？它没有出现在你的HTML中（编辑：现在好了，但最初没有:)

$("#mail").val($("#email").val())应该做你想做的事。

Answer 4

使用keyup并更改两者。

$("#boxx").on('keypress change', function(event) {
       var data=$(this).val();
       $("div").text(data);
});

这是一个例子 http://jsfiddle.net/6HmxM/785/

Answer 5

你可以简单地做到这一点

$('#mail').text($('#email').val())

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

5 个答案:

Try it out with this jsFiddle