Question

I have a textbox in my html body: input type="text" id="text-input"

I am using this to bring it into focus when the user presses enter:

<script>
    $(document).keypress(function(e) {
        if(e.keyCode == 13) {
            $("#text-input").focus();
        }
    });
</script>

The webpage I am using to try it out has only the text box in it. When I click on a blank area, and press enter, the “|” prompt will be misaligned downwards. If I repeat this clicking and pressing enter, the “|”, which is supposed to be in the textbox, keeps moving down more and more.

What went wrong?

Answer 1

Try using keyup instead of keypress

$(document).keyup(function(e) {
    if(e.keyCode == 13) {
        $("#text-input").focus();
    }
});​

Example: keypress and keyup

Tested in chrome and results are different.

Note: keypress=(keydown and keyup 2 events). May be this is the issue but not sure.