CODEWITHSUNDEEP
jqueryhtmlios
Thomas Grusz
Thomas Grusz

Reputation: 93

jQuery .keypress return value does not show on iOS

I have a 9x9 html table with input elements inside, encoding a Sudoku board.

I use jQuery's .keypress method to validate user input and then switch the focus to the next box:

// Only allow numbers from 1-9 (49-57), the 0-key (48) to tab, and the 'Enter' key to submit (13)

$('.box').keypress(function(event) {

// Check for 'Enter' key
if (event.which === 13) {
    return event.which;

// Check for digits 1-9
} else if (event.which >= 49 && event.which <= 57) {
    if ($(this).parent().is('td:last-child')) {
        $(this).closest('tr').next().children().first().find('.box').focus();
    } else {
        $(this).parent().next().find('.box').focus();
    }
    return event.which;

// Check for 0-key
} else if (event.which === 48) {
    if ($(this).parent().is('td:last-child')) {
        $(this).closest('tr').next().children().first().find('.box').focus();
    } else {
        $(this).parent().next().find('.box').focus();
    }
    return false;

// Check for other invalid keys
} else {
    return false;
}
});

This works fine on the desktop/laptop, but on iOS the returned values from the .keypress method do not show on the board, except for the very last box (bottom, right).

I use jQuery 3.2.1 slim and iOS 9.3.5 Chrome/Safari.

Can anyone help?

Thanks!

Upvotes: 1

Views: 124

Answers (1)

Thomas Grusz
Thomas Grusz

Reputation: 93

I found a solution to my problem above.

I used a .keypress event to validate and record the user input.

Then, after the input is validated and recorded, I used a separate .keyup event to move the focus on to the next box.

I don't know why, but apparently iOS first needs to record the user input before moving the focus on. Otherwise it will not display the returned user input.

/// Only allow numbers from 1-9 (49-57) and the 'Enter' key to submit form (13)
$('.box').keypress(function(event) {
    return (event.which >= 49 && event.which <= 57) || event.which === 13;
});
// On keyup trigger move focus to the next box
$('.box').keyup(function(event) {
    if ((this.value.length === this.maxLength) || event.which === 48) {
        if ($(this).parent().is('td:last-child')) {
            $(this).closest('tr').next().children().first().find('.box').focus();
        } else {
            $(this).parent().next().find('.box').focus();
        }
    }
});

Upvotes: 1

Related Questions