We Keep Coding

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.

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>

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);
}

Validation and Backspace Conflict Firefox

I have an input field that has a validation. The validation works great in all browsers. However in Firefox there seems to be an issue. If an user presses backspace or arrow or home keys in that input field it simply does not work.
THE HTML:
<input onkeydown="return isName(event)" class="form-control firstnameweb_text" placeholder="First Name" id="firstname_text" name="firstname_text" onblur="isEmptyfname(this)" required="" type="text">
THE JS:
function isName(e, t) {
try {
if (window.event) {
var charCode = window.event.keyCode;
} else if (e) {
var charCode = e.which;
} else {
return true;
}
if ((charCode > 64 && charCode < 91) || (charCode > 96 && charCode < 123) || (charCode > 7 && charCode < 10) || (charCode == 46) || (charCode > 38 && charCode < 39) || (charCode == 32) || (charCode == 190))
return true;
else
return false;
} catch (err) {
alert(err.Description);
}};

SHIFT+HOME and SHFT+left/right keys for text fields not working

I am using Struts2 <s:textfield /> tag and the below code calculates and checks / validates the value entered in the text field on the fly with JS.
It also updates the total entered in textfield list, these are handled by onblur and onkeydown events as below.
<s:textfield id = "fieldid"
name = "xyz"
onblur = "javascript:calculateTotal()"
onkeydown = "javascript:checkDecimal(this); return checkDecimal(event);"
/>
By using this code SHIFT+HOME , SHIFT+Left and SHIFT+Right keys functionalities are not working.
Is there any possibilities that this is due to onblur and onkeydown events ?
function checkDecimal(evt) {
var charCode;
var version = msieversion();
if(version==8){
charCode = (window.event) ? evt.keyCode : evt.which;
charCode = (window.event) ? evt.keyCode : evt.which;
}else{
charCode = (evt.which) ? evt.which : evt.keyCode;
}
if (!evt.shiftKey) {
if ((charCode >= 48 && charCode <= 57) ||
(charCode == 8) ||
(charCode == 46) ||
(charCode == 190) ||
(charCode == 35 ) ||
(charCode == 36) ||
(charCode == 9) ||
(charCode == 37) ||
(charCode == 39) ||
(charCode >= 96 && charCode <= 105) ||
(charCode == 110))
{
return true;
} else {
return false;
}
} else {
if (charCode == 9) {
return true;
} else {
return false;
}
}
}

You need to use the keypress event instead of the keydown one.
The keypress will intercept the resultant character,
while the keydown will interpret the SHIFT as a button itself.
Then try using
<s:textfield id = "fieldid"
name = "xyz"
onblur = "javascript:calculateTotal()"
onkeypress = "javascript:checkDecimal(this); return checkDecimal(event);"
/>

Code will look like this...
if (!evt.shiftKey) {
if ((charCode >= 48 && charCode <= 57) ||
(charCode == 8) ||
(charCode == 46) ||
(charCode == 190) ||
(charCode == 35 ) ||
(charCode == 36) ||
(charCode == 9) ||
(charCode == 37) ||
(charCode == 39) ||
(charCode >= 96 && charCode <= 105) ||
(charCode == 110))
{
return true;
} else {
return false;
}
} else if(evt.shiftKey) {
if ((charCode == 35 ) || (charCode == 39) || (charCode == 37) || (charCode == 36)) {
return true;
}
}

I assume you need to validate and allow only the decimal values. In that case this snippet will do the job.
<input id = "fieldid"
name = "xyz"
onblur = "javascript:calculateTotal()" onkeypress="return checkDecimal(event);" />
<script>
function isNumeric(n) {
return !isNaN(parseFloat(n)) && isFinite(n);
}
function checkDecimal(evt) {
var charCode = (window.event) ? evt.keyCode : evt.which;
var currentVal = String.fromCharCode(charCode);
var val = document.getElementById(evt.currentTarget.id).value + '' + currentVal;
return (evt.shiftKey || isNumeric(val) || isNumeric(currentVal) || String.fromCharCode(currentVal) == '.');
}
</script>
Please feel free to correct me if I was not read the question correctly.

Javascript validation works in Google Chrome but not in Firefox

Here is the js code
function isCharKey(evt){
var charCode = event.keyCode
if ((charCode > 64 && charCode <91 )|| (charCode >96 && charCode<123) || (charCode==32))
return true;
return false;
}
Here is the html code
<label id="exe_form_name">Name:</label><input type="text" name="tbcust_name" id="name1" onkeypress="return isCharKey(event);">

Change
var charCode = event.keyCode
to
var charCode = evt.keyCode

function isCharKey(evt)
{
var charCode = evt.keyCode
if ((charCode > 64 && charCode <91 )|| (charCode >96 && charCode<123) || (charCode==32))
return true;
return false;
}

How to allow numbers, backspace, delete, left and right arrow keys in the html text?

I am using following javascript code which I think should only allow numbers, backspace, delet, left arrow and right arrow keys in textbox, but it is also allowing alphabets. I don't know why?
function validateQty(event) {
var key = window.event ? event.keyCode : event.which;
if (event.keyCode == 8 || event.keyCode == 46
|| event.keyCode == 37 || event.keyCode == 39) {
return true;
}
else if ( key < 48 || key > 57 ) {
return false;
}
else return true;
};
Calling this function as
<input type="text" onkeypress='validateQty(event)'>

No doubt your code is correct but you missed "return" keyword in textbox.
<input type="text" onkeypress='return validateQty(event);'>
You can see the code here

<input type="text" class="form-control" id="dompetku_msisdn" name="dompetku_msisdn" placeholder="Phone Number" aria-describedby="helpBlock" onkeydown='return (event.which >= 48 && event.which <= 57) || event.which == 8 || event.which == 46 || event.which == 37 || event.which == 39' required /> </input>

function isNumberKey(evt)
{
var charCode = (evt.which) ? evt.which : event.keyCode
if (charCode > 31 && (charCode < 48 || charCode > 57))
return false;
return true;
}
<HTML>
<HEAD>
</HEAD>
<BODY>
<input id="txtChar" onkeypress="return isNumberKey(event)" type="text" name="txtChar" maxlength="10">
</BODY>
</HTML>

const validateQty = (event) => {
var key = window.event ? event.keyCode : event.which;
console.log(event);
if (event.keyCode === 8 || event.keyCode === 46
|| event.keyCode === 37 || event.keyCode === 39) {
return true;
} else if (key < 48 || key > 57) {
return false;
} else { return true; }
};
<input type="text" onkeydown='return validateQty(event);'>

I modified his code a bit, so you can just add a class to an input
$(".numberonly").keydown(function(e){
// Number Only
if (e.keyCode == 8 || e.keyCode == 46
|| e.keyCode == 37 || e.keyCode == 39) {
return true;
}
else if ( e.keyCode < 48 || e.keyCode > 57 ) {
e.preventDefault();
}
});
add class to an input
<input type="text" class="numberonly" />