ansaurus

Question

Jquery: Mirror one text input to another

Answer 1

+6 A:

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 looses focus:

$('#idfield1').bind('keypress 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).

Felix Kling 2010-06-04 20:10:40

You probably want to update on blur as well to capture cut/paste events.

tvanfosson 2010-06-04 20:12:07

@tvanfosson: You are right. I thought about blur first, but then I had the word "mirror" in my mind and thought it should really be synchronous... fixed.

Felix Kling 2010-06-04 20:15:12

Strange thing happens. it seems the mirror is one character behind. For example if I type "hello person", the other box reads "hello perso". any ideas?

atwellpub 2010-06-04 20:28:17

@atwellpub: Mmh interesting. Actually I have no idea *why* . But it works for me using `keyup` instead of `keypress` ;)

Felix Kling 2010-06-04 20:42:50

I would put both keyup and keypress with the blur in the bind. This handles the first as well as the multi-with key held down.

Mark Schultheiss 2010-06-04 20:52:51

Great!, keyup does the trick. Now another question, and this I believe is a little trickier, how can I prevent mirroring if input 1 already has content?

atwellpub 2010-06-05 02:04:23

@atwellpub: Can you clarify this please?

Felix Kling 2010-06-05 08:09:15

For clarification, if my input box 1 has the text "hello" in it, and I type "goodbye" in my input box 2, "Goodbye" does not replace "Hello", but if Input box 1 is empty, whatever is typed in input box 2 will display in input box 1.

atwellpub 2010-06-05 14:22:42

@atwellpub: So in my example it would be that if if `field2` is already populated it should not be updated, right?

Felix Kling 2010-06-05 15:28:50

Well, I believe we have the same idea, but the way I have it mapped out is if field1 is populated, feild1 being originally bound to whatever is typed into field2, then the binding between field1 and field2 is nulled. But if again field1 becomes blank, then whatever is typed into field2 also appears in field1.

atwellpub 2010-06-05 16:22:28

@atwellpub: Is it possible that both fields have the same value and field1 should **not** be updated? If **not** then you can just check whether field1 contains the same value as field2 minus the last character. If it does, it should be updated (because then, field1 is either empty or got already updated).

Felix Kling 2010-06-05 16:39:34

Thank you very much that helped me solve it! Final code: $('#id_query').bind('keyup keypress blur', function() { var a = $('#id_campaign_name').val(); var b = $('#id_query').val(); b = b.slice(0, -1); if (a==b) { $('#id_campaign_name').val($(this).val()); } });

atwellpub 2010-06-08 21:21:49

Answer 2

+2 A:

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

Mark Schultheiss 2010-06-04 20:57:32

ansaurus

tags:

views:

answers:

Jquery: Mirror one text input to another

related questions