Contrast in the way JavaScript input is handled between computers and smartphones

Question

Contrast in the way JavaScript input is handled between computers and smartphones

Recently, I developed a sudoku game using JavaScript. The program is designed to only accept numbers from 1-9. However, when I tested it on my Android phone, the program was accepting both letters and digits.

Unfortunately, the code seems to not be working properly on Android devices. Can anyone provide some guidance on how to resolve this issue?

Thank you in advance for your help!

$(document).ready(function() {
    $("input").keydown(function (e) {
        if ((e.shiftKey || (e.keyCode < 49 || e.keyCode > 57)) && (e.keyCode < 97 || e.keyCode > 105)) {
            e.preventDefault();
        }
    });
});

javascript

Answer 1

Answer №1

Instead of restricting input at the start, why not take all input and then clean it up afterwards?

$('input').on('input', function (e) {
    $(this).val($(this).val().replace(/[^1-9]/g, ''); //eliminate any characters that are not between 1 and 9
});

Answer 2

Instead of restricting input at the start, why not take all input and then clean it up afterwards?

$('input').on('input', function (e) {
    $(this).val($(this).val().replace(/[^1-9]/g, ''); //eliminate any characters that are not between 1 and 9
});

Answer 3

Answer №2

Start by updating your <input type="text"> to <input type="number"> in order to display the number keyboard on touch devices.

Next, use Regular Expressions to filter your input:

$(document).ready(function () {
    $("input").keyup(function () {
        $(this).val($(this).val().replace(/[^0-9]/g, ''));
    });
})

Answer 4

Start by updating your <input type="text"> to <input type="number"> in order to display the number keyboard on touch devices.

Next, use Regular Expressions to filter your input:

$(document).ready(function () {
    $("input").keyup(function () {
        $(this).val($(this).val().replace(/[^0-9]/g, ''));
    });
})

Contrast in the way JavaScript input is handled between computers and smartphones

Answer №1

Answer №2

Similar questions

Problem encountered while using AJAX to load a PHP script, triggered by an onclick event;

Retrieve the nth element from an array using a function that requires 2 arguments

Run a function after all xmlHttpRequests have finished executing

Is there a way to modify the button's color upon clicking in a React application?

Executing JavaScript code does not execute CSS code

The routing is not functioning properly as anticipated

The challenge lies in updating props using the `onchange` event in Vue.js 2

Displaying and Concealing Divisions

The Mongoose connection pool has been shut down

Integrate JavaScript date into the gulp-rev workflow

Tips for successfully passing store state as a prop in React-Redux with TypeScript

What is the typical output value that fluctuates?

SmartEdit functions properly when spartacus is running using yarn start --ssl, but does not work without SSL enabled

Issue - Basic Data Protection and Unscrambling - Node.js

Toggle between multiple chart displays within a <div> using a selection list

The module script failed to load due to an unexpected response from the server, which was MIME type of text/jsx instead of a javascript module script

Which is better for event handling: one large event or multiple small events?

Creating a Canvas Viewport Tailored for Multiplayer Gaming

Creating a unique Vue.js modal window for every individual product

Using CSS or Javascript, you can eliminate the (textnode) from Github Gist lists