JQuery - 实时复制字段输入文本答案

【问题标题】：JQuery - Duplicate Field Input Text In Real TimeJQuery - 实时复制字段输入文本
【发布时间】：2010-10-31 01:43:10
【问题描述】：

我正在尝试弄清楚如何将用户在一个表单域中的文本输入复制到另一个表单域。具体来说，当有人在联系表格中填写他们的电子邮件地址时，它将在邮件列表表格中重复。

这两种表单都使用 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");

谢谢！

【问题讨论】：

你可以这样做 $('#mail').val($('#email'))
请提供.optionCopyTo() jQuery 方法的链接。我在 [ jQuery 文档 ](docs.jquery.com/Main_Page) 中找不到它 ---- 哦，你一定指的是这个插件 - plugins.jquery.com/project/Option - 它不是 jQuery 核心的一部分，并且必须单独添加。
您好，是的，这就是我所指的页面。感谢您的所有回答，但我在让它们中的任何一个工作时遇到了一些麻烦。有机会看看吗？ jsfiddle.net/DJdfZ/2
这里的工作示例供任何需要它的人使用：jsfiddle.net/DJdfZ/3
@logic-unit，您正在尝试为 $('#mail').val() = this.value;. jQuery's [.val()@987654330 处的函数分配一个值@$('#mail').val($('#email').val())`。（另外我认为您不需要将整个内容包装在 $() 中，因为 jsFiddle 已经这样做了：jsfiddle.net/clarkf/3bqLK/1）

标签： javascript jquery html

【解决方案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 );
});

【讨论】：

【解决方案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()

【讨论】：

啊，差不多了，但我希望文本在他们键入时出现，因此我戏剧性地使用了“实时”一词。有点像矩阵效果，但带有文本输入（笑话）。
标题注释：实时复制字段输入文本 - 这不是它，对不起

【解决方案3】：

$("#mail") 是另一个输入框吗？它没有出现在您的 HTML 中（编辑：现在很好，但一开始没有:)

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

【讨论】：

是的，我在那里做了一个偷偷摸摸的编辑，当我看到我把我的代码粘贴到......时弄得一团糟：-/

【解决方案4】：

使用 keyup 并同时更改两者。

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

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

【讨论】：

我使用这种类型的代码。但这对单一身份有好处。需要创建优化功能。这适用于每个领域。
@ChaitanyaDesai 您可以通过使用类或直接标签名称来做到这一点。这是示例jsfiddle.net/6HmxM/1209

【解决方案5】：

你可以这样做

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

【讨论】：

抱歉，您可以在目标上执行 .val，在源上再次执行 .val。