Javascript functiion not working as expected

Question

Currently I'm trying create a script that will only allow A-Za-z, 0-9, white space and comma. Here is my script:

<textarea name="commentText" onkeypress="return filterCharAll(event,this);"></textarea>

function filterCharAll(e, t) {
 if (window.event) {
 var charCode = window.event.keyCode;
 }
 else if (e) {
 var charCode = e.which;
 }
 else { return true; }
 if ((charCode > 47 && charCode < 58) || (charCode > 64 && charCode < 91) || (charCode > 96 && charCode < 123) || (charCode == 188 || charCode == 32 || charCode == 13)) {
 return true;
 } else {
 return false;
 } 
}

Everything is working perfectly! But the comma is not working. When I press it, nothing happens

JSfiddle: https://jsfiddle.net/mek7qy8h/

Can you help me? Thank you.

• inukix: keycode.info when I test at this site, is showing 188 for comma. Anyways, 42 is not working too...
• RobG: Regarding if (window.event), the relevant event object is passed in the call, you don't need to look for it again. KeyboardEvent.keyCode is deprecated and is from an obsolete standard, you should not use it, "Be aware that this feature may cease to work at any time".

Answer 1

You need to check the charCode of 44 to match the comma:

function filterCharAll(e, t) {
 if (window.event) {
 var charCode = window.event.keyCode;
 } else if (e) {
 var charCode = e.which;
 } else {
 return true;
 }
 if (charCode === 44 || (charCode > 47 && charCode < 58) || (charCode > 64 && charCode < 91) || (charCode > 96 && charCode < 123) || (charCode == 188 || charCode == 32 || charCode == 13)) {
 return true;
 } else {
 return false;
 }
}

<textarea name="commentText" onkeypress="return filterCharAll(event,this);"></textarea>

But it might be easier to use a regular expression and test e.key:

function filterCharAll(e) {
 return /[a-z0-9\s,]/i.test(e.key);
 // return true if the key is alphabetical (lower or upper),
 // or digits, or whitespace, or a comma
 // return false otherwise
}

<textarea name="commentText" onkeypress="return filterCharAll(event);" onpaste="return false;"></textarea>

Another option that doesn't break pasting would be to use an input listener instead, and replace all disallowed characters with the empty string:

const textarea = document.querySelector('textarea');
textarea.addEventListener('input', () => {
 textarea.value = textarea.value.replace(/[^a-z0-9\s,]/gi, '');
});

<textarea></textarea>

• kamoroso94: You shouldn't use .key since it will return the name of a special key, e.g. "Alt" which will match the regular expression without ^$ anchors.
• inukix: Do you know how to avoid CTRL+V? Is possible insert certain characters using CTRL+V inside textarea
• CertainPerformance: @inukix You can just return false on a paste event
• inukix: But it will block paste on every box on my page? I need only inside this specfic textarea.
• CertainPerformance: @inukix See the code in the answer - just like you can onkeypress="return filterCharAll(event);" for just that element, you can similarly onpaste="return false;" for just that element (paste would only be disabled on outer elements as well if the handler was attached to some outer element)

Answer 2

You should not be using charCode since it is deprecated, instead you can use char and test that against a regular expression.

function filterAll(event) {
 return /[A-Za-z0-9, ]/.test(event.char);
}