I'm trying to create a PIN input, wherein the user may only use 4 digits.

In my code, I have managed to exclude A-Z and any other keys like curly braces, colons and so on, but I have faced some trouble with excluding the special characters (shift + 0-9).

Regarding the length, I have successfully set it to 4, but if 4 is reached and one wants to delete it doesn't go past 3.

My code:

var pin = document.forms.RegForm.pin;

pin.onkeydown = function(key) {
    var
        allowedkeys = [],
        auxkeys = [8, 13, 17, 18, 46],
        specChars = "!@#$%^&*()",
        keypressed = String.fromCharCode(key.which);

    allowedkeys.push(auxkeys);
    for (var i = 37; i < 41; i++) allowedkeys.push(i);
    for (var i = 48; i < 58; i++) allowedkeys.push(i);
    for (var i = 96; i < 106; i++) allowedkeys.push(i);

    if (this.value.length <= 3) {
        if (specChars.indexOf(keypressed) !== -1 ||
                (key.which < 48 || key.which > 57) &&
                (key.which < 96 || key.which > 105)) key.preventDefault();
    }
    else {
        if (auxkeys.indexOf(key.which) === -1) return false;
    }
};

I know the length can easily be done with maxlength = "4" in HTML, but for the purpose of getting to know JavaScript better, I would prefer an 'in JavaScript' solution.

Should you provide an answer or a link to a similar question, if there is one, I would appreciate it. Fiddle: /

I'm trying to create a PIN input, wherein the user may only use 4 digits.

In my code, I have managed to exclude A-Z and any other keys like curly braces, colons and so on, but I have faced some trouble with excluding the special characters (shift + 0-9).

Regarding the length, I have successfully set it to 4, but if 4 is reached and one wants to delete it doesn't go past 3.

My code:

var pin = document.forms.RegForm.pin;

pin.onkeydown = function(key) {
    var
        allowedkeys = [],
        auxkeys = [8, 13, 17, 18, 46],
        specChars = "!@#$%^&*()",
        keypressed = String.fromCharCode(key.which);

    allowedkeys.push(auxkeys);
    for (var i = 37; i < 41; i++) allowedkeys.push(i);
    for (var i = 48; i < 58; i++) allowedkeys.push(i);
    for (var i = 96; i < 106; i++) allowedkeys.push(i);

    if (this.value.length <= 3) {
        if (specChars.indexOf(keypressed) !== -1 ||
                (key.which < 48 || key.which > 57) &&
                (key.which < 96 || key.which > 105)) key.preventDefault();
    }
    else {
        if (auxkeys.indexOf(key.which) === -1) return false;
    }
};

I know the length can easily be done with maxlength = "4" in HTML, but for the purpose of getting to know JavaScript better, I would prefer an 'in JavaScript' solution.

Should you provide an answer or a link to a similar question, if there is one, I would appreciate it. Fiddle: https://jsfiddle/qn968nhm/1/

• javascript
• html

• 4 <input type="text" pattern="\d{4}" /> -- job done, no JS needed and in fact using JS here would be a bad idea. – Niet the Dark Absol Commented May 11, 2016 at 14:42
• 2 @Niet the Dark Absol And add a note with "please don't use safari because is not supported." – zozo Commented May 11, 2016 at 14:46
• @zozo Validation should always be server-side anyway. The use of client-side validation is intended to be a convenience and so if the browser doesn't support it then so be it, it doesn't matter. – Niet the Dark Absol Commented May 11, 2016 at 14:48
• 1 @NiettheDarkAbsol, I don't see the point between your last ment and the first one. If only for convenience, why "JS here would be a bad idea" and if for security, do you really trust more some HTML? – Kaiido Commented May 11, 2016 at 14:50
• 2 @Niet the Dark Absol Maybe he uses node as server so is js server side? Or maybe he does double check server side? Or maybe is an interactive feature? There can be tens of reasons for some1 to validate on front/also on front. – zozo Commented May 11, 2016 at 14:50

3 Answers 3

You can ensure that they only enter digits in this way (so as to make the JS as simple as possible).

pin.onkeypress = function (e) {
   return e.charCode >= 48 && e.charCode <= 57;
};

@a.j. Response is better :) I leave this one for diversity.

You may want to change the approach. Instead of limiting input characters, let the user type, then get the value from input and validate it. If it is not valid, return it to the previous step.

Note: The following script may be improved (global vars removed, etc. etc.).

var inputValue = document.getElementById('yourInput');

function validateValue() {
    var value = document.getElementById('yourInput').value;
    var reg = new RegExp('^[0-9]$');
    return reg.test(value);
}


document.getElementById('yourInput').onkeyup = function() {
     if (!validateValue) {
         document.getElementById('yourInput').value = inputValue;
     }
     else {
         inputValue = document.getElementById('yourInput').value;
     }
};

(Posted on behalf of the OP).

Answer:

pin.onkeypress = function (e) {
    if (this.value.length <= 3) {
        // Return only numbers
        return e.which >= 48 && e.which <= 57; // @a.j.'s answer
    }
    else {
        // If length is 4 disable input
        return false;
    }
};