Skip to content Skip to sidebar Skip to footer

Ignoring Input Characters On Key Down

I want to ignore certain characters in my phone input, so that the database just has digits. I know I can do this easy on server side (using PHP) but I am trying to understand js e

Solution 1:

I would strongly advise against changing the user's input or otherwise prevent them from typing something while they're doing it. It is confusing and leads to a bad user experience.

Ideally, you should keep your server-side validation and then use HTML5 features such as these:

<inputtype="number" /> Allows only numbers
<inputtype="text" pattern="[0-9. -]*" /> Allows numbers, spaces, periods and hyphens
<inputtype="text" required /> Specifies a required field

Modern browsers will prevent the form from being submitted and present helpful error message to the user (which you can customise with a title attribute).

However, for general reference, return false; doesn't necessarily cancel the event. To do that, you should use this:

// if you haven't already:
e = e || window.event;
// to cancel the event:if( e.preventDefault) e.preventDefault();
returnfalse;

Solution 2:

I had to do something similar for a project I'm working on. This is how I did it.

// prevent users from typing alpha/ symbol characters on select fields
$("#modal-region").on("keydown", "#markdown, #sku", function(e) {

    var key = e.which;
    // when a keydown event occurs on the 0-9 keys the value // of the "which" property is between 48 - 57 // therefore anything with a value greater than 57 is NOT a numeric keyif ( key > 57) {
        e.preventDefault();

    } elseif (key < 48) {

    // we don't want to disable left arrow (37), right arrow (39), delete (8) or tab (9)// otherwise the use cannot correct their entry or tab into the next field!if (key != 8 && key != 9 && key != 37 && key != 39 ) {
            e.preventDefault();
        }
    }

});

Post a Comment for "Ignoring Input Characters On Key Down"