Jquery: Mirror one text input to another

Question

I'm wanting to have one text field autopopulate with whatever the other text field has being typed into it.

How do I go about this?

Thank you! Hudson

Answer 1

Short and simple:

$('#idfield1').keypress(function() {
    $('#idfield2').val($(this).val());
});

or to bind it to several events in order to update it also if it loses focus:

$('#idfield1').bind('keypress keyup blur', function() {
    $('#idfield2').val($(this).val());
});

Reference: .keypress(), .val(), .blur(), .bind()

Update:

Due to, for me, mysterious reasons, when the first character is typed in, it is not set in the other input field. Has anyone any idea? ;)

It works though by using keyup (keydown also produces the same strange result).

Answer 2

Dustin Diaz has written a wonderful mirror for Twitter Widget using jQuery

$.fn.mirror = function (selector) {
    return this.each(function () {
        var $this = $(this);
        var $selector = $(selector);
        $this.bind('keyup', function () {
            $selector.val(($this.val()));
        });
    });
};

Use it like

$('#source_text_id').mirror('#destination_text_id'); 

Answer 3

For an alternative:

$('#idfield1').bind('keyup keypress blur', function() 
{  
      $('#idfield2')[0].value = $(this)[0].value; 
});

or

$('#idfield1').bind('keyup keypress blur', function() 
{  
    $('#idfield2').val($(this).val()); 
});

For more recent version of jQuery you can also use .on

$('#idfield1').on('keyup keypress blur', function() 
{  
      $('#idfield2').val($(this).val());  
});