Key-Press event listener when checking textarea input in Javascript

Question

I want to check two conditions for every button press on the keyboard inside a textarea:

1) If it's a number then add it to the text area.

2) If it's anything else push an alert to the user.

The textarea tag in the html is:

<textarea id="input" placeholder="EnterInput"></textarea>

What I wrote inside the JS file is:

document.getElementById("input").addEventListener("keypress", checkInput(e));
function checkInput(keyPressed){
    if(keyPressed < 48 || keyPressed > 57){
        alert("Wrong input! The charcted entered is not a number.");
    }
}

I want to prevent from adding the charcter in case of not a number character. — itzikos
– itzikos, Commented Dec 12, 2014 at 15:18

tymeJV · Accepted Answer · 2014-12-12 15:13:03Z

4

You're immediately invoking your listener function by having the ()

document.getElementById("input").addEventListener("keypress", checkInput(e))
                                                                         ^^ INVOKED!

event will automatically be passed to your function, so simply omit that:

document.getElementById("input").addEventListener("keypress", checkInput)

Also, the which property of event stores the key code (on most browsers, as @TJCrowder pointed out, older browsers may use the keyCode property):

function checkInput(event) {
    var keyCode = event.hasOwnProperty('which') ? event.which : event.keyCode;
    //Now check
}

answered Dec 12, 2014 at 15:13

tymeJV

105k14 gold badges165 silver badges158 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

tymeJV Over a year ago

@T.J.Crowder - Good to know.. I often forget about older browsers :\ - updating answer.

itzikos Over a year ago

how do i block the character from being inserted to the textarea value in case of not a number?

T.J. Crowder Over a year ago

@user3126715: On modern browsers: event.preventDefault(); On older IE: event.returnValue = false;. So if (event.preventDefault) { event.preventDefault(); } else { event.returnValue = false; } Or use hookEvent from this answer and you can always rely on event.preventDefault();

Collectives™ on Stack Overflow

Key-Press event listener when checking textarea input in Javascript

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related