发表新帖
发表新帖

How to prevent invalid characters from being typed into input fields

后端 未结
关注
7 1714
猫巷女王i
猫巷女王i 2020-11-29 10:11

Onkeydown, I run the following JavaScript:

function ThisOnKeyDown(el) {
   if (el.title == \'textonly\') {
       !(/^[A-Za-zÑñ-\\s]*$/i).test(e
相关标签:
7条回答
  • 一整个雨季
    2020-11-29 10:35

    To prevent it from being set in the first place, you can return false on the keydown event handler, thus preventing the event from propagating any further.

    I wrote the example below using jQuery, but you can use the same function when binding traditionally.

    Though it's important to validate on the server-side as well, client-side validation is important for the sake of user friendliness.

    $("input.number-only").bind({
    keydown: function(e) {
        if (e.shiftKey === true ) {
            if (e.which == 9) {
                return true;
            }
            return false;
        }
        if (e.which > 57) {
            return false;
        }
        if (e.which==32) {
            return false;
        }
        return true;
    }
});
    0 讨论(0)
  • 难免孤独
    2020-11-29 10:36 
    $('.key-filter').keypress(function () {
    if (event.key.replace(/[^\w\-.]/g,'')=='') event.preventDefault();
});

    then add the key-filter class to your input if using jquery or

    <input type="text" onkeypress="if (event.key.replace(/[^\w\-.]/g,'')=='') event.preventDefault();" />

    just put the charaters you want to allow inside the [] after the ^. this allows all letters numbers _ - and .

    0 讨论(0)
  • 春和景丽
    2020-11-29 10:37

    The above code does it says- allows ONLY numbers. You can modify it by adding exception to say BACKSPACE for example like this 

    <html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script>
            function keyispressed(e){
                var charValue= String.fromCharCode(e.keyCode);
                if((isNaN(charValue)) && (e.which != 8 )){ // BSP KB code is 8
                    e.preventDefault();
                }
                return true;
            }
        </script>
    </head>    
    <body>
        <input type="text" onkeydown="return keyispressed(event);"/>
    </body>
</html>
    0 讨论(0)
  • 再見小時候
    2020-11-29 10:41

    You could easily do this in a single html line.

    Like this to disallow spaces:

    <input type="text" onkeypress="return event.charCode != 32">

    Or this to only allow numbers:

    <input type="text" onkeypress='return event.charCode >= 48 && event.charCode <= 57'>

    Just look up the unicode of any numbers you want to allow or disallow.

    0 讨论(0)
  • 攒了一身酷
    2020-11-29 10:43

    Run your code against the onkeyup event and not the onkeydown event. This way you can access the result of the very last keystroke where as the onkeyup event executes as a key is pressed without knowing its result.

    0 讨论(0)
  • 星月不相逢
    2020-11-29 10:50

    Code is useful for preventing user from typing any other character except number.

    <html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script>
            function keyispressed(e){
                var charval= String.fromCharCode(e.keyCode);
                if(isNaN(charval)){
                    return false;
                }
                return true;
            }
        </script>
    </head>

    <body>
        <input type="text" onkeydown="return keyispressed(event);"/>
    </body>
</html>
    0 讨论(0)
 看不清?
提交回复
热议问题