JQuery - 实时重复字段输入文本 [英] JQuery - Duplicate Field Input Text In Real Time

问题描述

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

这两种表单都使用ajax，所以不用担心输入文字在提交时丢失。

这是我的代码：

 < div id =contact_form> 
< form name =contactmethod =postaction => 
 
< input type =textname =nameid =namesize =30value =Nameclass =text-input/> 
< label class =errorfor =nameid =name_error>请输入您的姓名。< / label> 
< br /> 
 
< input type =textname =emailid =emailsize =30value =Emailclass =text-input/> 
< label class =errorfor =emailid =email_error>我需要您的电子邮件。< / label> 
< br /> 
 
< textarea rows =10cols =30type =textareaname =messageid =messagevalue =Messageclass =text-input> < / textarea的> 
< label class =errorfor =messageid =message_error>需要留言。< / label> 
 
< br /> 
< input type =submitname =submitclass =buttonid =submitvalue =Send/> 
 
< / form> 
< / div> 
 
< div id =details> 
< p>一些细节在这里，不知道还有什么< / p> 
< / div> 
 
< div id =mail_list> 
< input type =textid =mailvalue =Your emailname =mail_list/>< input type =submitname =submitclass =buttonid =submitvalue =发送/> 
< / div> 
  

我在Jquery文档中找到了这个，但是无法使它工作：

  $（＃email）。optionCopyTo（＃mail）; 
  

谢谢！

解决方案

你说你想要实时。我假设这意味着当用户输入时，应该为每个击键复制该值。

如果这是正确的，试试这个：

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

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.

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:

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

Thanks!

解决方案

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:

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

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

This will update for each keyup event.

I'd probably add a redundant blur event in case there's an autocomplete in the field.

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

这篇关于JQuery - 实时重复字段输入文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！