Backspace is not clearing the field in mozilla browser - javascript

I have the input box which allows only numeric.In chrome and firefox it allows only numeric but can't delete the number in using backspace in mozilla.
$(document).ready(function () {
$('#price').keypress(function(event) {
if ((event.which != 46 || $(this).val().indexOf('.') != -1) && (event.which < 48 || event.which > 57)) {
event.preventDefault();
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type='text' id='price'>

Usually keypress only detects the printable keys, but the current version of Mozilla is able to detect backspace as well. Use the keydown event instead.
Demo
$(document).ready(function() {
$('#price').keydown(function(event) {
console.log(event.which);
if ((event.which != 46 || $(this).val().indexOf('.') != -1) && (event.which < 48 || event.which > 57)) {
event.preventDefault();
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type='text' id='price'>
Another approach Important!
Using above approach you will also have to check for other special keys like arrow keys and delete keys, not to mention if . is placed correctly and only once.
Another approach could be to simply remove non-numeric characters from the string on keyup
$(document).ready(function() {
$('#price').keyup(function(event) {
this.value = this.value.replace( /[^0-9.]/g, "" );
this.value = this.value.split(".").reduce((a,b,i)=> i > 1 ? a+b : a+"."+b );
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type='text' id='price'>

It's happening because you using a wrong way to avoid backspace. There backspace 8 as key code so you have avoided this in prevent default.use this code instead.
$(document).ready(function () {
$('#price').keypress(function(event) {
if ((event.which != 46 || $(this).val().indexOf('.') != -1) && (event.which < 48 || event.which > 57) && event.which != 8) {
event.preventDefault();
}
});
});

keypress event not working in firefox. you can use keyup or keydown event it will work.
$(document).ready(function () {
$('#price').keyup(function(event) {
if ((event.which != 46 || $(this).val().indexOf('.') != -1) && (event.which < 48 || event.which > 57) && event.which != 8) {
event.preventDefault();
}
});
});

Related

Jquery to allow negative and positive numbers on text field and negative sign should have 0 indexes

I need to validate a text field to accept only negative or positive numbers and indexing also matters. this is what I have tried so far.
this is HTML code
<input type="text" class="negativeaccept" >
here is Jquery
$(document).on('keypress','.negativeaccept', function(event) {
if (((event.which != 46 || (event.which == 46 && $(this).val() == '')) ||
$(this).val().indexOf('.') != -1) && (event.which < 48 || event.which > 57)) {
event.preventDefault();
}
});
this code only accepts a positive number with a decimal. I want a negative sign (-) of The 0 indexes.
i try this code and its working (event.which != 45 || $(this).val().indexOf('-') != -1) &&
but negative (-)sign enter any index. can you try this better than this a solution.
$(document).on('keypress','.negativeaccept', function(event) {
if (((event.which != 46 || (event.which == 46 && $(this).val() == '')) ||
$(this).val().indexOf('.') != -1) && (event.which != 45 || $(this).val().indexOf('-') != -1) &&
(event.which < 48 || event.which > 57)) {
event.preventDefault();
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" class="negativeaccept">

jQuery - How can I allow both numpad and number key row input; as well as prevent special characters from being entered?

I want to allow both number pad numeric and oridinary number from keyboard. Currently, it only allows the number key row. I also only want numbers to be entered, but it currently allows special characters.
$(document).ready(function() {
$('#price').keydown(function(event) {
if ((event.which != 46 || $(this).val().indexOf('.') != -1) && (event.which < 48 || event.which > 57) && event.which != 8) {
event.preventDefault();
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type='text' id='price'>
Have a look at this plug-in (Fork of texotela's numeric jquery plugin). This (jStepper) is another one.
This is a link if you want to build it yourself.
$(document).ready(function() {
$("#txtboxToFilter").keydown(function (e) {
// Allow: backspace, delete, tab, escape, enter and .
if ($.inArray(e.keyCode, [46, 8, 9, 27, 13, 110, 190]) !== -1 ||
// Allow: Ctrl+A, Command+A
(e.keyCode === 65 && (e.ctrlKey === true || e.metaKey === true)) ||
// Allow: home, end, left, right, down, up
(e.keyCode >= 35 && e.keyCode <= 40)) {
// let it happen, don't do anything
return;
}
// Ensure that it is a number and stop the keypress
if ((e.shiftKey || (e.keyCode < 48 || e.keyCode > 57)) && (e.keyCode < 96 || e.keyCode > 105)) {
e.preventDefault();
}
});
});
NOTE: If your webpage uses HTML5, you can use the built-in <input type="number"> and use the min and max properties to control the minimum and maximum value.
$(function() {
$('#staticParent').on('keydown', '#child', 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/1.9.1/jquery.min.js"></script>
<div id="staticParent">
<input id="child" type="textarea" />
</div>
I coppied from it on here
If its help for you.Please vote first writer .
Updated your code
$(document).ready(function() {
$('#price').keydown(function(event) {
if((event.which >= 48 && event.which <= 57) && event.shiftKey) {
event.preventDefault();
}
if ((event.which != 46 || $(this).val().indexOf('.') != -1) && (event.which < 48 || event.which > 57) && event.which != 8) {
event.preventDefault();
}
});
});
Use keypress for that instead of keydown
then
the keyCode of 0 to 9 are 48 to 57 so use this condition
if (event.keyCode < 48 || event.keyCode > 57) {
event.preventDefault();
}
this condition returns true if you enter keys that are not 0, 1, 2, 3, 4, 5, 6, 7 ,8 and 9 or not numbers
So your code would be like this
$(document).ready(function() {
$('#price').keypress(function(event) {
if (event.keyCode < 48 || event.keyCode > 57) {
event.preventDefault();
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type='text' id='price'>
Why we don't user input type number. I think just do it easy like this:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type='number' id='price'>

allow tab and other keys in input textbox

Below is my javascript code which restrict the user for following:
1) only allow numeric and upto two decimal points.
It also restrict the user for tab, backspace , delete, left and right arrow keys.
I tried by adding condition event.which != 8/9/37/38 but not succeed.
Below is the code:
$('#txtprice').keypress(function (event) {
if ((event.which != 46 || $(this).val().indexOf('.') != -1) && (event.which < 48 || event.which > 57)) {
event.preventDefault();
}
var text = $(this).val();
if ((text.indexOf('.') != -1) && (text.substring(text.indexOf('.')).length > 2)) {
event.preventDefault();
}
});
can any one please correct me here.
EDITED: Modified as below but not work.
$('#txtprice').keypress(function (event) {
if (event.which == 8 || event.which == 9 || event.which == 37 || event.which == 38) {
event.preventDefault();
return;
}
if ((event.which != 46 || $(this).val().indexOf('.') != -1) && (event.which < 48 || event.which > 57)) {
event.preventDefault();
}
var text = $(this).val();
if ((text.indexOf('.') != -1) && (text.substring(text.indexOf('.')).length > 2)) {
event.preventDefault();
}
});
Thanks
You simply just have to allow what you want, not determine what you don't want. This is easy by determining if the keyCode is a period (190) or in between 48 and 57.
function validateNum(e) {
var elem = document.getElementById("txtprice");
if (e.keyCode >= 48 && e.keyCode <= 57 || e.keyCode == 190) {
var txt = elem.value;
if (e.keyCode == 190 && txt.match(new RegExp('\\.','g')).length > 1) {
e.preventDefault();
}
} else {
e.preventDefault();
}
}
Here is a working js fiddle: http://jsfiddle.net/e72uqvbv/
UPDATE: I miss understood the period situation request, I have updated my answer.

Jquery Script Not Working to accept input numbers only

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)">

Alow only Integer and Float values in Textfield

I have a textfield of Price.
I want only Integer and Float values in it.
I have done the Integer. But it is not accepting Float values like : 3110.6
Here is my Code DEMO
JS:
$(document).ready(function () {
$("#price").keydown(function (event) {
// Allow only backspace and delete
if (event.keyCode == 46 || event.keyCode == 8) {
// let it happen, don't do anything
} else {
// Ensure that it is a number and stop the keypress
if (event.keyCode < 48 || event.keyCode > 57) {
event.preventDefault();
}
}
});
});
HTML:
<input name="price" type="text" id="price">
try this demo
$('#price').keypress(function(event) {
if(event.which == 8 || event.which == 0){
return true;
}
if(event.which < 46 || event.which > 59) {
return false;
//event.preventDefault();
} // prevent if not number/dot
if(event.which == 46 && $(this).val().indexOf('.') != -1) {
return false;
//event.preventDefault();
} // prevent if already dot
});
Simply use this:
<input name="price" type="number" id="price">
And remove your JavaScript code.
Try regular expression
/^[+-]?\d+(\.\d+)?$/
Just test the value of the input on the onchange event.
TRy Demo dot or period has keycode 190
$(document).ready(function() {
$("#price").keydown(function(event) {
// Allow only backspace and delete
if ( event.keyCode == 46 || event.keyCode == 8 || event.keyCode == 190 ) {
// let it happen, don't do anything
}
else {
// Ensure that it is a number and stop the keypress
if (event.keyCode < 48 || event.keyCode > 57 ) {
event.preventDefault();
}
}
});
});
But better will be use jquery validator plugin at http://jqueryvalidation.org/ as you dont have to check yourself.
For jquery version see JQUERY VALIDATION

Categories