Edit - Stack Overflow

You are not logged in. Your edit will be placed in a queue until it is peer reviewed.

We welcome edits that make the post easier to understand and more valuable for readers. Because community members review edits, please try to make the post substantially better than how you found it, for example, by fixing grammar or adding additional resources and hyperlinks.

Required fields*

Rev

Required fields*

Javascript functiion not working as expected

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.

Answer*

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>

Draft saved

Draft discarded

Edit Summary*

Cancel

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.

kamoroso94
– kamoroso94

2018年12月12日 01:25:37 +00:00
Commented Dec 12, 2018 at 1:25
Do you know how to avoid CTRL+V? Is possible insert certain characters using CTRL+V inside textarea

inukix
– inukix

2018年12月12日 01:30:58 +00:00
Commented Dec 12, 2018 at 1:30
@inukix You can just return false on a paste event

CertainPerformance
– CertainPerformance

2018年12月12日 01:33:15 +00:00
Commented Dec 12, 2018 at 1:33
But it will block paste on every box on my page? I need only inside this specfic textarea.

inukix
– inukix

2018年12月12日 01:34:55 +00:00
Commented Dec 12, 2018 at 1:34
@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)

CertainPerformance
– CertainPerformance

2018年12月12日 01:36:22 +00:00
Commented Dec 12, 2018 at 1:36

| Show 1 more comment

How to Edit

Correct minor typos or mistakes
Clarify meaning without changing it
Add related resources or links
Always respect the author’s intent
Don’t use edits to reply to the author

How to Format

create code fences with backticks ` or tildes ~
```
like so
```
add language identifier to highlight code
```python
def function(foo):
print(foo)
```
put returns between paragraphs
for linebreak add 2 spaces at end
_italic_ or **bold**
indent code by 4 spaces
backtick escapes `like _so_`
quote by placing > at start of line
to make links (use https whenever possible)

<https://example.com>

[example](https://example.com)

<a href="https://example.com">example</a>

formatting help »
answering help »

How to Tag

A tag is a keyword or label that categorizes your question with other, similar questions. Choose one or more (up to 5) tags that will help answerers to find and interpret your question.

complete the sentence: my question is about...
use tags that describe things or concepts that are essential, not incidental to your question
favor using existing popular tags
read the descriptions that appear below the tag

If your question is primarily about a topic for which you can't find a tag:

combine multiple words into single-words with hyphens (e.g. python-3.x), up to a maximum of 35 characters
creating new tags is a privilege; if you can't yet create a tag you need, then post this question without it, then ask the community to create it for you

popular tags »

lang-js

CollectivesTM on Stack Overflow

Javascript functiion not working as expected

Answer*