I am trying to prevent user from entering 0 in the input box.
HTML code :
<input class="billMenuQuantity" type="number" name="quantity">
Jquery code:
$('.billMenuQuantity').on('keyup keydown', function (e) {
if ($(this).val() < 1 && e.keyCode != 46 && e.keyCode != 8) {
e.preventDefault();
$(this).val(1);
}
});
It's preventing the user from entering the 0 but it's also preventing the user from entering the any other single digit number(i.e 2-9) other than 1.It is accepting the double digit number(i.e 11, 12 etc).
Can any one help me with this?
Just test code === 96 and length of the input-value
$('.billMenuQuantity').on('keyup keydown', function(e) {
var code = e.keyCode || e.which;
if (this.value.length === 0 && code === 96) {
e.preventDefault();
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<input class="billMenuQuantity" type="number" name="quantity">
Try this one
$(this).val() == 0 instead of $(this).val() < 1
$('.billMenuQuantity').on('keyup keydown', function (e) {
if ($(this).val() == 0 && e.keyCode != 46 && e.keyCode != 8) {
e.preventDefault();
$(this).val(1);
}
});
Related
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;
I need to restrict user input to allow only a integer or a two decimal number with a limit from 0 till 99999.99.
Tried with script but not succeed in all scenarios.
also, required this should work with mobile OS also.
$('#txtamount').keydown(function (event) {
if (event.which == 8 || event.which == 9 || event.which == 37 || event.which == 38 || event.which == 46) {
//event.preventDefault();
return true;
}
alert('final' + event.which);
if ((event.which != 46 || $(this).val().indexOf('.') != -1) && (event.which < 48 || event.which > 57)) {
return false;
event.preventDefault();
}
var text = $(this).val();
if ((text.indexOf('.') != -1) && (text.substring(text.indexOf('.')).length > 2)) {
return false;
event.preventDefault();
}
});
Tried with below stuff but, not working to restrict special chars.
http://jsfiddle.net/jquerydeveloper/LmHkD/
Instead of using keycode detection, probably better to use a regex and onchange, rather than keydown.
$(document).ready(function () {
$('input[name="number"]').change(function (e) {
var valueEntered = $(this).val()
var regex = /^[0-9]{1,5}(\.[0-9]{2})?$/
if (!regex.test(valueEntered)){
$(this).val(''); //set value to nil, consider also display message
}
});
});
I'd also modify the input type to be a number, rather than text:
<input name="number" type="number" value=" " />
JSFiddle: http://jsfiddle.net/LmHkD/259/
Note, this will just get you started, you may need to update the regex for your exact scenario
Here is the fiddle which will allow only to numbers.
I want to do this in based on id.
So i created this fiddle
$(document).ready(function () {
//called when key is pressed in textbox
$("#quantity").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;
}
});
});
How can i do this for a series of id like quantity1,quantity2, like this..
Update :
I can't use class name.. How can i do it only by id
All you've to do is to match all the id's which is simple. See this fiddle.
Here's the part code -
$(document).ready(function () {
//called when key is pressed in textbox
$("[id^=quantity]").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;
}
});
});
Demo
Try this
HTML
Number : <input type="text" name="quantity" class= "numberonly" id="quantity1" />
Number1 : <input type="text" name="quantity" class= "numberonly" id="quantity2" />
Number1 : <input type="text" name="quantity" class= "numberonly" id="quantity3" />
<span id="errmsg"></span>
Jquery
$(document).ready(function () {
for(var i = 1; i< 4 ;i++)
{
//called when key is pressed in textbox
$("#quantity"+i).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;
}
});
}
});
I have jQuery function that detect if some key in keyboard pressed. So far that worked, example if I press "P" then it will focus to textbox.
$(document).keyup(function(e)
{
if (e.keyCode == 51 || e.keyCode == 52 || e.keyCode == 80 || e.keyCode == 65)
{
$("#code_read_box").focus();
}
});
Now I want when I press "P", "P" will set too to textbox.
<input type="text" id="code_read_box" value=""/>
Any advice ?
DEMO here
Use String.fromCharCode:
String.fromCharCode(e.keyCode)
Demo: http://jsfiddle.net/hw2g5/
Your code:
$(document).keyup(function(e) {
if (e.keyCode == 51 || e.keyCode == 52 || e.keyCode == 80 || e.keyCode == 65) {
$("#code_read_box").focus();
$("#code_read_box").val(String.fromCharCode(e.keyCode));
}
});
If you want to append values, so:
$("#code_read_box").val($("#code_read_box").val() + String.fromCharCode(e.keyCode));
Solved.
$(document).keyup(function(e) {
var key = String.fromCharCode(e.keyCode);
if (key.match(/[34PA]/) && !$('input').is(':focus')) {
$('input').focus();
$('input').val($('input').val() + key);
}
});
I need the help for my problem in my asp.net MVC3 application I have a textbox which is validating for currency format ($228.00) but in this text box it doesn't work for the DEL key because . and delete key have same ASCII key which 46. I also set a validation in this textbox for . is only one time will be accept in the text box so if "." entered one time then delete will not work.
Here is my validate Javascript:
function validateForCharacter(val, id, e) {
window.event.keyCode : -1;
var key = e.keyCode || e.charCode || e.which;
var currentChar = String.fromCharCode(key);
if (val.indexOf(currentChar) != -1 && currentChar == ".")
{
return false;
}
if (key >= 48 && key <= 57 || key == 46 || e.keyCode === 8 || e.keyCode === 9 || e.keyCode === 37 || e.keyCode === 35 || e.keyCode === 39)
{
$(this).val("");
return true;
}
return false;
}
This is my View (Html) code for textbox:
<input type="text" id="t1" onkeypress="return validateForCharacter(value, id, event)/>
Jquery does it right... but in case you need specifically detect delete key on Firefox or IE9 you can use event.key property.
I.E:
if (event.key == "Delete")
Live Demo:
$(document).ready(function() {
$("#nondeletable").on("keydown", function(event) {
$("#result").html(event.type + ": " + event.which);
if (event.key == "Delete")
$("#result").append(" <b>Delete!</b>");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="nondeletable" />
<div id="result"></div>