This code is working in IE but not in Chrome:
<input type="text"
name="txtFirstName"
class="txtbox"
onkeypress="charsCapsSpaceOnly()"
maxlength="30"
onpaste="return false"
autocomplete='off'> </td>
function charsCapsSpaceOnly() {
event.keyCode = event.keyCode - 32;
if( ((event.keyCode >= 65 && event.keyCode <= 90)) || (event.keyCode == 32)) {
event.keyCode = event.keyCode;
} else {
event.keyCode=0;
}
}
This works in both IE9 and Chrome.
function charsCapsSpaceOnly()
{
if (!( ((event.keyCode >= 65 && event.keyCode <= 90)) || (event.keyCode == 32)) )
{
event.keyCode=0; // For IE
event.preventDefault(); // For chrome
}
}
If you want to get the keycode you will have to use this:
function (event){
var keyCode = !event.charCode ? event.which : event.charCode,
key = String.fromCharCode(keyCode);
....
}
Because IE is different from other browsers (They want to feel special :)) )
Related
I am new to Java Script .I want to prevent the user from entering decimals
in a field using JavaScript. I tried this method but showing this error .
Syntax error on token "_$tag____________", invalid AssignmentOperator
<td>
<form:input class="form-control line_qty_class inputs" onkeypress="checkDecimal();" required="required" id="line_qty${loop.index}" path="saleInvoiceLines[${loop.index}].quantity" />
</td>
<script>
function checkDecimal() {
$(".line_qty").keypress(function(e) {
if (e.which < 46 || e.which > 57) {
showAdvice(this, "Enter Integer Value");
return(false);
}
});
}
</script>
Here you go
$(".line_qty").keypress(function(e) {
if (e.which < 46 || e.which > 57) {
console.log("Enter Integer Value");
return (false);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<td>
<input class="line_qty" required="required" id="line_qty" />
</td>
What was wrong?
You assinged to onkyepress function which adds event on keypress. That's pointless. Either just add a function that fires on keypress or use onkeypress,
You wrote in jQuery class line_qty but your element did not have that class. It had class line_qty_class which is different,
You use a function showAdvice() which is not defined, but maybe you have that function defined so it is not a problem.
You can use jQuery keydown() Method to Preventing User from entering Decimals:
$(function() {
$( '#txtinteger' ).on( 'keydown', function( e ) {
-1 !== $.inArray( e.keyCode, [ 46,8,9,27,13,110,190 ] ) || ( /65|67|86|88/.test( e.keyCode ) && ( e.ctrlKey === true || e.metaKey === true ) ) && ( !0 === e.ctrlKey || !0 === e.metaKey ) || 35 <= e.keyCode && 40 >= e.keyCode || ( e.shiftKey || 48 > e.keyCode || 57 < e.keyCode ) && ( 96 > e.keyCode || 105 < e.keyCode ) && e.preventDefault()
} );
} )
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="txtinteger" />
onkeypress it's work good but Why onkeyup not working ? How to do for working with onkeyup ?
https://jsfiddle.net/btykt0nk/
function isNumber(number_check) {
number_check = (number_check) ? number_check : window.event;
var charCode = (number_check.which) ? number_check.which : number_check.keyCode;
console.log(charCode);
if (charCode > 31 && (charCode < 48 || charCode > 57)) {
return false;
}
return true;
}
<input type="text" onkeyup="return isNumber(event);">
We should handle it in onkeypress.
Check this out
<input type="text" onkeypress='return event.charCode >= 48 && event.charCode <= 57'>
</input>
There's no need to use return here, you just need to attach your function to the onkeyup event:
onkeyup="isNumber(event)"
function isNumber(event) {
event = (event) ? event : window.event;
var charCode = (event.which) ? event.which : event.keyCode;
//console.log(charCode);
if (charCode > 31 && (charCode < 48 || charCode > 57)) {
console.log(false);
}else{
console.log(true);
}
}
<input type="text" onkeyup="return isNumber(event);">
And in your function use console.log(true) and console.log(false) to track the result, because return false or return truewon't be very helpful here.
EDIT:
To make your input accept only numbers you can use event.preventDeafult() along with onkeypress event because onkeyup will fire the function after writing that character, it will exit when it isn't a number:
function isNumber(event) {
event = (event) ? event : window.event;
var charCode = (event.which) ? event.which : event.keyCode;
//console.log(charCode);
if (charCode > 31 && (charCode < 48 || charCode > 57)) {
console.log(false);
event.preventDefault();
}else{
console.log(true);
}
}
<input type="text" onkeypress="isNumber(event);">
Try onkeyup="isNumber(event)" (without return)
Updated your fiddle
<input type="text" onkeyup="isNumber(event)">
https://jsfiddle.net/btykt0nk/1/
I wanted a text field to take only numbers as some control keys and number should be exactly four digit long. My code is as Follows:
<div id="main" role="main">
Input a 4-digit: <input type="text" class="validateYearTextBox" />
</div>
<div id="alert"></div>
function checkValidInput() {
$(".validateYearTextBox").keydown(function(event) {
if (!((event.keyCode == 46 ||
event.keyCode == 8 ||
event.keyCode == 37 ||
event.keyCode == 39 ||
event.keyCode == 9) ||
$(this).val().length < 4 &&
((event.keyCode >= 48 && event.keyCode <= 57) ||
(event.keyCode >= 96 && event.keyCode <= 105)))) {
// Stop the event
event.preventDefault();
return false;
}
});
}
$(document).ready(function() {
checkValidInput();
});
when I enter a 4 digit in the text box a alert should be appear in div as "valid"
this is the Fiddle
Try this:
Jsfiddle: https://jsfiddle.net/jz1ra36d/
just add:
$(".validateYearTextBox").keyup(function(event) {
if( $(this).val().length == 4){
$("#alert").text("valid")
} else {
$("#alert").text("")
}
});
JSFiddle
Try following:
<div id="main" role="main">
Input a 4-digit: <input type="text" class="validateYearTextBox" />
</div>
<div id="alert"></div>
<script>
function checkValidInput() {
$(".validateYearTextBox").keydown(function(event) {
if (!((event.keyCode == 46 ||
event.keyCode == 8 ||
event.keyCode == 37 ||
event.keyCode == 39 ||
event.keyCode == 9) ||
$(this).val().length < 4 &&
((event.keyCode >= 48 && event.keyCode <= 57) ||
(event.keyCode >= 96 && event.keyCode <= 105)))) {
// Stop the event
event.preventDefault();
return false;
}
// count number of characters entered
var cs = $('.validateYearTextBox').val().length;
if(cs == 3)
{
$('#alert').html('valid');
}
else
{
$('#alert').html('');
}
});
}
$(document).ready(function() {
checkValidInput();
});
</script>
You can use regular expression for it and change to keyup event:
function checkValidInput() {
var re = /\d{4}/g,
dt = $('.validateYearTextBox'),
msg;
msg = re.test(dt.val()) ? "Valid" : "Invalid";
$('#alert').text(msg);
}
$(".validateYearTextBox").keyup(checkValidInput);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="main" role="main">
Input a 4-digit:
<input type="text" class="validateYearTextBox" />
</div>
<div id="alert"></div>
I would do something like this.
function checkValidInput() {
$(".validateYearTextBox").keydown(function(event) {
if( $(this).val().length == 3){
$('#alert').html('<p>SUCCESS</p>');
}
if (!((event.keyCode == 46 ||
event.keyCode == 8 ||
event.keyCode == 37 ||
event.keyCode == 39 ||
event.keyCode == 9) ||
$(this).val().length < 4 &&
((event.keyCode >= 48 && event.keyCode <= 57) ||
(event.keyCode >= 96 && event.keyCode <= 105)))) {
// Stop the event
event.preventDefault();
return false;
}
});
}
$(document).ready(function() {
checkValidInput();
});
Try this simple script after adding onblur="checkValidInput" id="validateYearTextBox" to input tag
function checkValidInput(){
var x,text;
x=document.getelementbyid("validateYearTextBox").value;
if(x==4)
text="Valid";
else
text="Not valid";
}
document.getelementbyid("alert").innerHTML=text;
function onlyAlphabets(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))
return true;
else
return false;
}
catch (err) {
alert(err.Description);
}
}
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;
}
$('input.facebookUrl').keyup(function(){
if (
($(this).val().length > 0) && ($(this).val().substr(0,24) != 'http://www.facebook.com/')
|| ($(this).val() == '')
){
$(this).val('http://www.facebook.com/');
}
});
<table align="center">
<tr>
<td>
<input name="firstname" class="text_area" maxlength=20 placeholder="Name" type="text" onKeyPress="return onlyAlphabets(event,this)" required id="ValidName" value="" />
</td>
<tr>
<td>
<input type="text" onkeypress="return isNumber(event)" id="volpincode" maxlength=7 name="pincode" value="" required placeholder="Pincode" class="text_area">
</td>
<td><input style="width:300px" type="text" onkeypress="return keyup(event)" class="facebookUrl" name="facebook" value="http://www.facebook.com/$facebook"></td>
<td>
<input style="width:30px" disabled="disabled" type="text" name="facebook" value="+91" />
</td>
</tr>
</tr>
</table>
I am trying to validate the Name and Pin code, as such that in the NAME field only the alphabets have to enter not any other characters and In Pincode only numbers should enter. The form is working in Google chrome as fine, but firefox when i enter and try to delete the text in text field, the characters are not getting deleted.
To validate only alphabets for Name use below code:
$(document).on("keydown", "#NametextboxID", function (e) {
if (e.ctrlKey || e.altKey) {
e.preventDefault();
} else {
var key = e.keyCode;
if (!((key == 8) || (key == 32) || (key == 46) || (key >= 35 && key <= 40) || (key >= 65 && key <= 90) || (key == 9))) {
e.preventDefault();
}
}
});
To validate only numbers for Pin use below code:
$(document).on("keydown", "#PinId", function (e) {
if (e.shiftKey || e.ctrlKey || e.altKey) { // if shift, ctrl or alt keys held down
e.preventDefault(); // Prevent character input
} else {
var n = e.keyCode;
if (!((n == 8) // backspace
|| (n == 46) // delete
|| (n >= 35 && n <= 40) // arrow keys/home/end
|| (n >= 48 && n <= 57) // numbers on keyboard
|| (n >= 96 && n <= 105)
|| (n == 9)) // number on keypad
) {
e.preventDefault();
// alert("in if");
// Prevent character input
}
}
});
Add one more condition to the "onlyAlphabets function" for the name field.
if (charCode == 8 || (charCode > 64 && charCode < 91) || (charCode > 96 && charCode < 123))
JS Fiddle Link
im using javascript to validate keys in textbox. it is not working :(
function numeric(e) {
return ((e.keyCode == 8) ||
(e.keyCode == 9) ||
(e.keyCode > 47 && e.keyCode < 58) ||
(e.keyCode > 36 && e.keyCode < 41) ||
(e.keyCode == 46) ||
(e.keyCode > 95 && e.keyCode < 106) ||
e.keyCode == 190 ||
e.keyCode == 110);
}
help me...
function numeric(e) {
e = e || window.event;
keycode = e.keyCode || e.which;
if(keycode === 13){
alert("cheese");
}
}
I know that in I.E. you can set event.keyCode=0 to suppress the key appearing in the control. But I think you need to trap the onkeydown. Firefox might have an equivalent. This is good because it prevents the key actually "arriving" at the control.
Also keep in mind that you might need to handle combinations of Shift + key and alt + key.
a good debug technique for this sort of thing is to say windows.status = event.keyCode,
and you can see what the keycode is as you type it...
Just try out the following code. I have checked F5 keycode, you can check as you want
function disableKey(event)
{
if (!event) event = window.event;
if (!event) return;
var keyCode = event.keyCode ? event.keyCode : event.charCode;
if (keyCode == 116) {
showMsg("This functionality is disabled.");
window.status = "F5 key detected! Attempting to disabling default response.";
window.setTimeout("window.status='';", 2000);
// Standard DOM (Mozilla):
if (event.preventDefault) event.preventDefault();
//IE (exclude Opera with !event.preventDefault):
if (document.all && event && !event.preventDefault) {
event.cancelBubble = true;
event.returnValue = false;
event.keyCode = 0;
}
return false;
}
}
function setEventListenerForFrame(eventListener)
{
document.getElementById('your_textbox').onkeydown = eventListener;
//frames['frame'].document.onkeypress = eventListener;
}
<body onload="setEventListener(disableKey);">
Try this if you want a numbers only textbox:
function numbercheck(event) {
var unicode = event.charCode; var unicode1 = event.keyCode; if (navigator.userAgent.indexOf("Firefox") != -1 || navigator.userAgent.indexOf("Safari") != -1) {
if (unicode1 != 8) {
if ((unicode >= 48 && unicode <= 57) || unicode1 == 37 || unicode1 == 39 || unicode1 == 35 || unicode1 == 36 || unicode1 == 9 || unicode1 == 46)
{ return true; }
else
{ return false; }
}
}
if (navigator.userAgent.indexOf("MSIE") != -1 || navigator.userAgent.indexOf("Opera") == -1) {
if (unicode1 != 8) {
if (unicode1 >= 48 && unicode1 <= 57)
{ return true; }
else
{ return false; }
}
}
}
And in your textbox call it on the onkeypress event:
onkeypress="return numbercheck(event)"