Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – How can I prevent user typing certain letters?

function NumberKey(event) {
    let charCode = event.which || event.keyCode;
    console.log(event.keyCode)
    if ((charCode >= 48 && charCode <= 57) || //  Number (0-9)
        (charCode >= 96 && charCode <= 105) || // Numberpad (0-9)
        (charCode >=112 && charCode <= 123)|| // F keys (F1~12)
        charCode === 8 || // backspace
        charCode === 9 || // tab
        charCode === 13|| // enter
        charCode === 37 || // arrow left
        charCode === 39 || // arrow right
        charCode === 46){ // delete
    }else{
    event.preventDefault();
    return false;
    }
}

this is my code to prevent user typing anything else than numbers

and when I apply it as

onkeydown="return NumberKey(event)"

{% (with shift)
`qwertyuipasdfgh'zxcvb. (without shift)

+IME based languages are typable

onkeypress="return NumberKey(event)"

!@#$%^&*() (with shift)

+IME based languages are typable

When I apply both,

% (with shift)

+IME based languages are typable

I do not understand certain things about this result

  1. Why would onkeypress and onkeydown give different result?

  2. Why does onkeypress let % printed while it block all the rest special letters?

And for the other issue, I need help

Through console, I figured out that IME based languages are not counted as event.
I’ve done some searching, finding out that IME takes the letter away as part of composition,
which eventually never let me take the letter before it is shown on the screen.

I knew input type="password" would force IME to be disabled,
forcing user to type English only.
Which was fascinating just except that the letters are hidden,
so I can’t use them for phone numbers or IDs

tried ime-mode:disabled, found out it was deprecated for security issue long time ago.

Many people I found on web just let the user type whatever
and delete afterwards if typed items do not satisfy certain conditions,
which is definitely not what I want…

document.addEventListener('DOMContentLoaded', function() {
    const inputElement = document.getElementById('yourInputElementId');
    inputElement.addEventListener('compositionstart', function(event) {
        event.preventDefault();
    });
    inputElement.addEventListener('compositionupdate', function(event) {
        event.preventDefault();
    });
    inputElement.addEventListener('compositionend', function(event) {
        event.preventDefault();
    });
});

This is what ChatGPT suggested, which didn’t work at all.

Oh and I forgot to say that I tried regex too, which didn’t work the way I wanted…
Here’s some regex I tried

function NumberKey(evt) {
    let charCode = evt.which || evt.keyCode;
    let charStr = String.fromCharCode(charCode);
    let numcheck = /^[a-zA-Zㄱ-ㅎ가-힣]$/;
    if (numcheck.test(charStr)) {
        evt.preventDefault();
        return false;  
    } else {
        return true;
    }
}

function NumberKey(evt) {
    let charCode = evt.which || evt.keyCode;
    let charStr = String.fromCharCode(charCode);
    let numcheck = /^[0-9]$/;
    if (numcheck.test(charStr)) {
        return true; 
    } else {
        evt.preventDefault();
        return false; 
    }
}

Sorry for writing too long
Please help me! I’ve been holding on to this for days!

Tags:

2

Answers


  1. 0

    I think using regex would help here – although it has lots of its own special syntax to learn/navigate.
    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp/test
    It can detect characters, ranges, allowing them and not allowing them.

    Apologies if not applicable or if I’m overlooking something

    Login or Signup to reply.
  2. 0 
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<script>
var shifted = false;

function numberCheck(event) {
    if(event.keyCode == 16) {
        shifted = true;
    }

    if(shifted) return false;

    // Any, Backspace, Tab, ArrowLeft, ArrowRight, Delete -> add here other allowed keyCodes
    let keyCodes = [0, 8, 9, 13, 37, 39, 46];

    if(keyCodes.includes(event.keyCode) || (event.keyCode >= 48 && event.keyCode <= 57) || (event.keyCode >= 96 && event.keyCode <= 105)) {
        return true;
    } else {
        return false;
    }
}

function shiftCheck(event) {
    if(event.keyCode == 16) {
        shifted = false;
    }
}
</script>


<span>Only numbers here: </span> <input type="text" onkeydown="return numberCheck(event)" onkeyup="return shiftCheck(event)"></input
</body>
</html>

    Differences between key actions – look at this explanation: onKeyPress Vs. onKeyUp and onKeyDown.

    To prevent shifted number keys (@,#, etc.) you need to keep Shift button state.

    Looks like your function NumberKey lacks return true when event.keyCode is allowed.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search