How to Prevent the Keypress Event in JavaScript | CodeLSC

The keypress event is triggered when a user presses a key on their keyboard. This event can be used to do things like restrict the input that a user can enter, or to show an error message if the user enters an invalid character.

 

To prevent the keypress event, you can use the preventDefault() method. This method is called on the event object that is passed to the event listener function.

The following code shows how to prevent the keypress event from being triggered when a user presses a letter key on the name input field:

 const nameInput = document.getElementById('fname');

nameInput.addEventListener('keypress', function (event) {
       const allowedCharacters = /^[a-zA-Z]+$/;
       if (!allowedCharacters.test(event.key)) {
                event.preventDefault();
       } 
});

 

In this code, the allowedCharacters regular expression is used to check if the key that the user pressed is a letter. If the key is not a letter, the preventDefault() method is called to prevent the keypress event from being triggered.

 

The preventDefault() method can also be used to prevent the default action of an event. For example, the default action of the keypress event is to insert the character that the user pressed into the input field. By calling the preventDefault() method, you can prevent this from happening.

 

The following code shows how to prevent the default action of the keypress event from being triggered when a user presses the Enter key on the age input field:

 const ageInput = document.getElementById('age');

ageInput.addEventListener('keypress', function (event) {
       const allowedCharacters = /^[0-9]+$/;
       if (!allowedCharacters.test(event.key)) {
                event.preventDefault();
       } 
});

 

In this code, the event.key property is used to check if the key that the user pressed is the Enter key. If the key is the Enter key, the preventDefault() method is called to prevent the default action of the keypress event from being triggered.

 

Full Code:

 <!DOCTYPE html>
<html>

<head>
    <title>Keypress Event Example</title>
    <style>
        input {
            width: 100%;
            padding: 12px 20px;
            margin: 8px 0;
            display: inline-block;
            border: 1px solid #ccc;
            border-radius: 4px;
            box-sizing: border-box;
        }

        div {
            border-radius: 5px;
            background-color: #f2f2f2;
            padding: 20px;
        }

        .error {
            color: red;
        }
    </style>
</head>

<body>
    <h3>Prevent keypress event</h3>
    <div>
        <form action="/action_page.php">
            <label for="fname">Name</label>
            <input id="fname" name="firstname" placeholder="Your name..">
            <div id="nameError" class="error"></div>

            <label for="age">Age</label>
            <input id="age" name="age" placeholder="Your age..">
            <div id="ageError" class="error"></div>
        </form>
    </div>
    <script>
        // Get references to the input fields and error message divs
        const nameInput = document.getElementById('fname');
        const ageInput = document.getElementById('age');
        const nameError = document.getElementById('nameError');
        const ageError = document.getElementById('ageError');

        // Add event listeners to restrict input and show error messages
        nameInput.addEventListener('keypress', function (event) {
            const allowedCharacters = /^[a-zA-Z]+$/;
            if (!allowedCharacters.test(event.key)) {
                event.preventDefault();
                nameError.textContent = 'Only alphabet characters allowed';
            } else {
                nameError.textContent = ''; // Clear error message
            }
        });

        ageInput.addEventListener('keypress', function (event) {
            const allowedCharacters = /^[0-9]+$/;
            if (!allowedCharacters.test(event.key)) {
                event.preventDefault();
                ageError.textContent = 'Only numeric characters allowed';
            } else {
                ageError.textContent = ''; // Clear error message
            }
        });
    </script>
</body>

</html>

I hope this blog post has helped you learn how to prevent the keypress event in JavaScript.


#js #keypress #preventdefault #eventlistener #regex #inputvalidation #webdev #dev #coding #techie #tutorial #learn #howtopreventthekeypresseventinjavascript #howtopreventthekeypresseventinjavascriptfunction #howtopreventthekeypresseventinjavascriptand #howtopreventthekeypresseventinjavascriptandhtml

Comments

Post a Comment