I have written following jquery for allowing only capital and small alphabets to a textbox
$(".only-alphabets").keypress(function(e) {
if (e.which != 8 && e.which != 0 &&
(e.which < 65 || e.which > 90) && (e.which < 96 || e.which > 105)
) {
return false;
} else {
return true;
}
Now it works fine for A to Z but works only for a to i in small case.
Please help !!!
$(".only-alphabets").keypress(function(e) {
if (e.which != 8 && e.which != 0 &&
(e.which < 65 || e.which > 90) && (e.which < 96 || e.which > 122)
) {
return false;
} else {
return true;
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input class='only-alphabets'>
ASCII code for lower case is from a-96 to z-122
You use regular expression:
$("#myTextBox").on("input", function(){
var regexp = /[^a-zA-Z]/g;
if($(this).val().match(regexp)){
$(this).val( $(this).val().replace(regexp,'') );
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="myTextBox" />
Related
I want to validate the string which the user enters into a textbox. I have to prevent user from entering alpha characters into the textbox and I also want to restrict user to entering no more than 6 digits, and also prevent the user from entering special characters into the textbox. I have tried the below code which is working when the user manually enters the value in textbox, but it's not working when the user pastes the some code into textbox.
<input type="text" name="textbox" id="textbox" class="form-control" required>
$("#textbox").on('keypress', function(e) {
var length = 6;
var validationtype = 'numeric';
var stringLength = $('#textbox').val().length;
if(stringLength < length) {
if(validationtype == 'alphanumeric') {
if (e.which != 8 && e.which != 0 && ((e.which < 65 || e.which > 122) || (e.which < 48 || e.which > 57))) {
return false;
}
} else if (validationtype == 'numeric') {
if (e.which != 8 && e.which != 0 && (e.which < 48 || e.which > 57)) {
return false;
}
}
} else {
return false;
}
});
Just use Paste event to handle this the same way.
/*Click and Past events*/
$("#textbox").on('keypress', function(e) {
return onTextChange(e, this);
});
$("#textbox").on("paste", function(e){
return onTextChange(e, this);
});
/*--------------------*/
function onTextChange(e, thisRef){
let length = 6;
let stringLength = $(thisRef).val().length;
let validationtype = 'numeric';
if(stringLength < length && e.which !== undefined) {
if(validationtype == 'alphanumeric') {
if (e.which != 8 && e.which != 0 && ((e.which < 65 || e.which > 122) || (e.which < 48 || e.which > 57))) {
return false;
}
} else if (validationtype == 'numeric') {
if (e.which != 8 && e.which != 0 && (e.which < 48 || e.which > 57)) {
return false;
}
}
} else {
return false;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" name="textbox" id="textbox" class="form-control" required>
$("#chartModal").keypress( function (e) {
if (e.which != 8 && e.which != 0 && e.which != 43 && e.which != 45 && e.which != 46 && (e.which < 48 || e.which > 57)) {
return false;
}
});
This accept +, - & . in between the number, which is not a number.
Try with this
$(document).ready(function () {
$('#chartModal').keypress(function(e) {
var key = e.charCode || e.keyCode || 0;
var keychar = String.fromCharCode(key);
if ( ((key == 8 || key == 9 || key == 46 || key == 35 || key == 36 || (key >= 37 && key <= 40)) && e.charCode==0) /* backspace, end, begin, top, bottom, right, left, del, tab */
|| (key >= 48 && key <= 57) ) { /* 0-9 */
return;
} else {
e.preventDefault();
}
});
});
Here is an example:
$('#chartModal').keypress(function(e){
if (e.which != 8 && e.which != 0 &&e.which!= 43 && e.which!=45 && e.which !=46 &&(e.which < 48 || e.which > 57)) {
return false;
}
var charCode = e.which;
var value=$(this).val();
if(charCode==43 && value.indexOf('+')>=0) //Check whether a + is already there at beginning
return false;
if (charCode == 45 && value.indexOf('-') >= 0)//Check whether a - is already there at beginning
return false;
if (charCode == 46 && value.indexOf('.')!=-1)//Check at least one . is present in the number
return false;
});
Replace #idname with id of input.
I am working on responsive Html Design. There are some number fields and they have some requirements.
Control take only number
After decimal it take only two digits
Max value not greater than 9999999999
Max Length is 9 in case float value it will (999999.99)
All validation work on key press or key up
I implement this code it working fine for desktop and other mobile device but not working on any Samsung tab. If i use input type="number" then maxlength or max value not working in Samsung tab. Plz help me.
CODE
$("#txtnumber").keydown(function (event) {
if (event.shiftKey == true) {
event.preventDefault();
}
if ((event.keyCode >= 48 && event.keyCode <= 57) || (event.keyCode >= 96 && event.keyCode <= 105) || event.keyCode == 8 || event.keyCode == 9 || event.keyCode == 37 || event.keyCode == 39 || event.keyCode == 46 || event.keyCode == 190 || event.keyCode == 110) {
} else {
event.preventDefault();
}
if (($(this).val().indexOf('.') !== -1 && event.keyCode == 190) || $(this).val().indexOf('.') !== -1 && event.keyCode == 110)//Allow only one time decimal to input
event.preventDefault();
});
$("#txtnumber").keyup(function () {
var number = ($(this).val().split('.'));
if (number[1].length > 2) {
var FNumber = parseFloat($("#txtnumber").val());
$("#txtnumber").val(FNumber.toFixed(2));
}
});
JSFiddle URL
Here is an example using jquery,
$("#txtnumber").on('keyup keydown', function () {
if (isNaN(($(this).val()))) {
$(this).val($(this).val().substring(0, ($(this).val().length - 1)));
}
if ($(this).val().length > 10 && $(this).val().indexOf('.') == -1) {
$(this).val($(this).val().substring(0, 10));
}
if ($(this).val().indexOf('.') !== -1 && $(this).val().length > 9) {
$(this).val($(this).val().substring(0, 9));
}
if (($(this).val().indexOf('.') !== -1)) {
var decimal = $(this).val().split('.');
if (decimal[1].length > 2) {
$(this).val($(this).val().substring(0, ($(this).val().length - 1)));
}
}
});
Updated Fiddle
I have written my Jquery script to input number only for textbox.
Following is my html code :
<input type="text" name="mobile_number" id="mobile_number" maxlength="10" class="form-control input-md" placeholder="Mobile Number" required="required">
When I try to input some value it accepts both numbers and characters also.
My Jquery Script is :
$("#mobile_number").keydown(function(event) {
if ( event.keyCode == 46 || event.keyCode == 8 || event.keyCode == 9 ) {
}
else {
if ((event.keyCode < 48 || event.keyCode > 57) && (event.keyCode < 96 || event.keyCode > 105 )) {
event.preventDefault();
}
} });
$(document).ready(function () {
//called when key is pressed in textbox
$("mobile_number").keypress(function (e) {
//if the letter is not digit then display error and don't type anything
if (e.which != 8 && e.which != 0 && (e.which < 48 || e.which > 57)) {
//display error message
$("#errmsg").html("Digits Only").show().fadeOut("slow");
return false;
}
});
});
http://jsfiddle.net/lesson8/HkEuf/1/
I have updated the code here check this out it works as expected .
Or, you could try an existing solution,
like this one: http://firstopinion.github.io/formatter.js/demos.html
or this one: http://www.decorplanit.com/plugin/
Check that you have included any version of jquery, also write your code in $(document).ready() like,
$(function () {
$("#mobile_number").keydown(function (event) {
if (event.keyCode == 46 || event.keyCode == 8 || event.keyCode == 9) {
} else {
if ((event.keyCode < 48 || event.keyCode > 57) && (event.keyCode < 96 || event.keyCode > 105)) {
event.preventDefault();
}
}
});
});
Demo
the range of keyCode for numbers is [95,105]; and [48,57]
$("#mobile_number").keydown(function(event) {
if ( (event.keyCode > 95 && event.keyCode <106)||(event.keyCode > 47 && event.keyCode <58)) {
}
else {
event.preventDefault();
}
});
I use this OneLiner
<input type="number" onkeypress="return /[0-9]/i.test(event.key)">
Or
<input type="text" onkeypress="return /[0-9]/i.test(event.key)">
The Question
To help avoid end-user confusion, I want to add an alert message that pops up if/when the user clicks any other key ["alert('Only Numerical data allowed')"]. So if they press the 'k' the above message will pop up. Can anyone see how to set this code within this code base
jsfiddle: http://jsfiddle.net/EN8pT/4/
The Code
jquery:
$('input.numberinput').bind('keypress', function (e) {
var w = e.which;
return (w != 8 && w != 0 && (w < 48 || w > 57) && w != 46) ? false : true;
});
html
<div class="containercontent">
<div class="label">Enter a number:</div>
<input type="text" name="txtNumber1" id="txtNumber1" value="" class="numberinput" />
<div class="label">Enter a number:</div>
<input type="text" name="txtNumber2" id="txtNumber2" value="" class="numberinput" />
</div>
Simple :
$(document).ready(function () {
$('input.numberinput').bind('keypress', function (e) {
if((e.which != 8 && e.which != 0 && (e.which < 48 || e.which > 57) && e.which != 46) )
{
alert('Only Numbers');
return false;
}
else{
return true;
}
});
});
Link : http://jsfiddle.net/justmelat/EN8pT/
Hello again :) I can help you out with this as well:
$(document).ready(function () {
$('input.numberinput').bind('keypress', function (e) {
var allow = (e.which != 8 && e.which != 0 && (e.which < 48 || e.which > 57) && e.which != 46) ? false : true;
if (!allow) {
alert('Only Numerical data allowed');
}
return allow;
});
});?
JSFiddle: http://jsfiddle.net/EN8pT/3/
Enjoy and good luck!