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);
}};
Related
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);
}
Here, I want to restrict some special character except ( ) ? / - , and alphanumeric characters.Below code properly works on chrome but not in Firefox.
JavaScript Code:
<script type="text/javascript">
function ValidAlphabet(e,t) {
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) || (event.keyCode >= 48) && (event.keyCode <= 57) || (charCode == 32) || (charCode == 63) || (charCode >= 40 && charCode <= 41) || (charCode == 44) || (charCode == 45) || (charCode == 47))
{
return true;
}
else {
return false;
}
};
</script>
code design
<body style="background-color: Cornsilk">
<form id="form1" class="body" runat="server" autocomplete="off" onkeypress="return ValidAlphabet(event,this)" onpaste="return false">
</form>
</body>
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.
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;
}
I want to enter only character values inside a <textarea> and numeric values in another. I have been able to make a JavaScript function which only allows numeric values to be entered in the <textarea> using onkeypress. This works in Firefox and Chrome.
For alphabets I am creating another JavaScript function using windows.event property. Only problem is this works only in Chrome and not in Firefox.
I want to know how to allow only alphabets to be entered using onkeypress event as used for entering only numeric values?
function isNumberKey(evt){ <!--Function to accept only numeric values-->
//var e = evt || window.event;
var charCode = (evt.which) ? evt.which : evt.keyCode
if (charCode != 46 && charCode > 31
&& (charCode < 48 || charCode > 57))
return false;
return true;
}
function ValidateAlpha(evt)
{
var keyCode = (evt.which) ? evt.which : evt.keyCode
if ((keyCode < 65 || keyCode > 90) && (keyCode < 97 || keyCode > 123) && keyCode != 32)
return false;
return true;
}
<label for="cname" class="label">The Risk Cluster Name</label>
<textarea id="cname" rows="1px" cols="20px" style="resize:none" placeholder="Cluster Name" onKeyPress="return ValidateAlpha(event);"></textarea>
<br>
<label for="cnum">Risk Cluster Number:</label>
<textarea id="cmun" rows="1px" cols="12px" style="resize:none" placeholder="Cluster Number" onkeypress="return isNumberKey(event)"></textarea>
function lettersOnly()
{
var charCode = event.keyCode;
if ((charCode > 64 && charCode < 91) || (charCode > 96 && charCode < 123) || charCode == 8)
return true;
else
return false;
}
<input type="text" name="fname" value="" onkeypress="return lettersOnly(event)"/>
If you don't need to support older browsers I would use the input event. This way you can also catch non-alpha characters if the user pastes text into the textarea.
I cleaned up your HTML a little bit. The most important changes are to the events on cname and cnum. Note that the event in both cases has been changed to oninput.
<label for="cname" class="label"> The Risk Cluster Name</label>
<textarea id="cname" rows="1" cols="20" style="resize:none" placeholder="Cluster Name" oninput="validateAlpha();"></textarea>
<label for="cnum">Risk Cluster Number:</label>
<textarea id="cmun" rows="1" cols="12" style="resize:none" placeholder="Cluster Number" oninput="isNumberKey();"></textarea><br /><br /><br />
Assuming you want cname to only accept characters in the alphabet and cnum to only accept numbers, your JavaScript should be:
function validateAlpha(){
var textInput = document.getElementById("cname").value;
textInput = textInput.replace(/[^A-Za-z]/g, "");
document.getElementById("cname").value = textInput;
}
function isNumberKey(){
var textInput = document.getElementById("cmun").value;
textInput = textInput.replace(/[^0-9]/g, "");
document.getElementById("cmun").value = textInput;
}
This code uses regular expressions, a way to match patterns in strings.
Best Uses
<input type="text" name="checkno" id="checkno" class="form-control" value="" onkeypress="return isNumber(event)"/>
<input type="text" name="checkname" id="checkname" class="form-control" value="" onkeypress="return isAlfa(event)"/>
function isNumber(evt) {
evt = (evt) ? evt : window.event;
var charCode = (evt.which) ? evt.which : evt.keyCode;
if (charCode > 31 && (charCode < 48 || charCode > 57)) {
return false;
}
return true;
}
function isAlfa(evt) {
evt = (evt) ? evt : window.event;
var charCode = (evt.which) ? evt.which : evt.keyCode;
if (charCode > 31 && (charCode < 65 || charCode > 90) && (charCode < 97 || charCode > 122)) {
return false;
}
return true;
}
function digitonly(input,event){
var keyCode = event.which ? event.which : event.keyCode;
var lisShiftkeypressed = event.shiftKey;
if(lisShiftkeypressed && parseInt(keyCode) != 9){return false;}
if((parseInt(keyCode)>=48 && parseInt(keyCode)<=57) || keyCode==37/*LFT ARROW*/ || keyCode==39/*RGT ARROW*/ || keyCode==8/*BCKSPC*/ || keyCode==46/*DEL*/ || keyCode==9/*TAB*/ || keyCode==45/*minus sign*/ || keyCode==43/*plus sign*/){return true;}
BootstrapDialog.alert("Enter Digits Only");
input.focus();
return false;
}
function alphaonly(input,event){
var keyCode = event.which ? event.which : event.keyCode;
//Small Alphabets
if(parseInt(keyCode)>=97 && parseInt(keyCode)<=122){return true;}
//Caps Alphabets
if(parseInt(keyCode)>=65 && parseInt(keyCode)<=90){return true;}
if(parseInt(keyCode)==32 || parseInt(keyCode)==13 || parseInt(keyCode)==46 || keyCode==9/*TAB*/ || keyCode==8/*BCKSPC*/ || keyCode==37/*LFT ARROW*/ || keyCode==39/*RGT ARROW*/ ){return true;}
BootstrapDialog.alert("Only Alphabets are allowed")
input.focus();
return false;
}
hi try below code it worked for me in all browsers, it allows numbers and few special characters like,.+-() :
in the textbox use as follows
<asp:Textbox Id="txtPhone" runat="server" onKeyPress="return onlyNumbersandSpecialChar()"> </asp:Textbox>
function onlyNumbersandSpecialChar(evt) {
var e = window.event || evt;
var charCode = e.which || e.keyCode;
if (charCode > 31 && (charCode < 48 || charCode > 57 || charCode > 107 || charCode > 219 || charCode > 221) && charCode != 40 && charCode != 32 && charCode != 41 && (charCode < 43 || charCode > 46)) {
if (window.event) //IE
window.event.returnValue = false;
else //Firefox
e.preventDefault();
}
return true;
}
</script>