JQuery - Дублирующий текст ввода поля в реальном времени

Я пытаюсь понять, как скопировать ввод текста пользователя в одном поле формы в другое. В частности, когда кто-то заполняет свой адрес электронной почты в контактной форме, он будет дублироваться в форме списка рассылки.

Обе эти формы используют 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");

Спасибо!

Ответ 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

Поскольку все ваши поля имеют уникальные идентификаторы, это довольно просто:

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

Попробуйте это с помощью jsFiddle

.change()
.val()

Ответ 3

Является ли $( "# mail" ) еще одним полем ввода? Он не отображается в вашем HTML (Edit: ну, теперь, но не поначалу:)

$("#mail").val($("#email").val()) должен делать то, что вы хотите.

Ответ 4

используйте keyup и измените оба.

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

вот пример http://jsfiddle.net/6HmxM/785/

Ответ 5

вы можете просто сделать это

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