CODEWITHSUNDEEP
jqueryhtmlcss
Itamar
Itamar

Reputation: 534

jQuery Keypress Event

I'm dealing with two text box - using jQuery I want that every time the user updates the value in the first box , the same value will apear in the second box.

​<input type="text" class="pack"/ >
​<input type="text" class="pack2"/>​​​​​​​​​​​​​​​​​​​​​​​​

​$(".pack").keypress(function(){
    $(".pack2").val($(this).val());
});​​​​​

The problem is that if I type a letter in "pack" , it won't appear in "pack2" right away - I'll have to type another letter, and then the first letter will appear in pack2

You can check the fiddle - http://jsfiddle.net/itamarperetz/jGXyA/

What can I so pack2 will be updated right away?

Any suggestion will be helpful, Thanks in advance

Upvotes: 1

Views: 109

Answers (4)

Mahmoud Abdelaziz
Mahmoud Abdelaziz

Reputation: 117

Use keyup event

$(".pack").keyup(function(){
    $(".pack2").val($(".pack").val());
});​

Upvotes: 1

Undefined
Undefined

Reputation: 11431

Check out this working answer.

You should use keyup rather than keypress.

Check out the API here.

Upvotes: 1

Pieter
Pieter

Reputation: 3399

That's because keypress is fired before the character is actually added to the input-field. Try using keyup instead, which is fired after the character is added to the input-field.

Upvotes: 1

Richard
Richard

Reputation: 8280

Try changing the keypress event to keyup.

​$(".pack").keyup(function() {
    $(".pack2").val($(this).val());
});​​​​​

jsFiddle demo

Upvotes: 2

Related Questions