Question

I have two text fields in my web page. The user is supposed to enter two numbers seperated by a hyphen (“-“) character. The numbers may be between 1 and 10 digits each. I need the cursor to move to the next field when the user presses the hyphen key.

I can easily move the cursor using $('#txtField2').focus(). However, I still have the problem that the hyphen character remains in the first text field. How can I easily supress the hyphen from appearing in the first text field?

Answer 1

HTML

<form>
    <input type='text' class='num' />
    <input type='text' class='num' />
</form>

JavaScript

$('.num:first').keydown(function (event) {
    // check for hyphen
    if (event.which === 189) {
        event.preventDefault();
        $(this).next('.num').focus();
    }
});

Live demo