Home ยป JavaScript ยป Filter Keyboard Input Values Using JavaScript

Filter Keyboard Input Values Using JavaScript

Here is an example to filter keyboard input values using JavaScript.

JavaScript - Filter Keyboard Input Values Example

In the following script, it will prompt the user to enter the ASCII value of keyboard input and then will filter the textbox for that value. The user will not be able to input that alphabet.

The script code for the HTML HEAD part:

<script>
    var badChar;
    function listenEvent(eventTarget, eventType, eventHandler) {
        if (eventTarget.addEventListener) {
            eventTarget.addEventListener(eventType, eventHandler,false);
        }
        else if (eventTarget.attachEvent) {
            eventType = "on" + eventType;
            eventTarget.attachEvent(eventType, eventHandler);
        }
        else {
            eventTarget["on" + eventType] = eventHandler;
        }
    }
    function  cancelEvent (event) {
        if (event.preventDefault) {
            event.preventDefault();
        }
        else {
            event.returnValue = false;
        }
    }
    window.onload=function() {
        badChar = prompt("Please input the ASCII value of a Keyboard key to filter.","");
        var keyinput = document.getElementById("source");
        listenEvent(keyinput,"keypress",processClick);
    }
    function processClick(evt) {
        evt = evt || window.event;
        var keyvalue = evt.charCode ? evt.charCode : evt.keyCode;
        // zap that bad boy
        if (keyvalue == badChar) cancelEvent(evt);
    }
</script>

The script code for the BODY part:

<form>
<textarea id="source" rows="20" cols="50"></textarea>
</form>

Output

The output would be the same as in the featured image of this article.