I have a quantity text box which should not allow negative sign, and '.'
character.
I have tried a jquery block but it allow '.'. I want to block '.' in a text box
$(document).ready(function () {
$('#used_quantity').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.0/jquery.min.js"></script>
<input type="text" id="used_quantity">
Do with keydown event.Only match with key value, not with string of the input
Updated
with backspace
$(document).ready(function() {
$('#used_quantity').keydown(function(event) {
if ((event.which != 46) && (event.which < 48 || event.which > 57) && (event.which != 8)) {
event.preventDefault();
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<input type="text" id="used_quantity">
You need to modify the condition to event.which == 46 || event.which == 45 to ignore the . and the - respectively.
$(document).ready(function() {
$('#used_quantity').keypress(function(event) {
if (event.which == 46 || event.which == 45 || event.which < 48 || event.which > 57) {
event.preventDefault();
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<input type="text" id="used_quantity">
Please check this code. It will work. Remove
if ((event.which != 46 || $(this).val().indexOf('.') != -1) &&
(event.which < 48 || event.which > 57))
condition to
if ((event.which < 48 || event.which > 57) && event.which != 45) {
Check jsliddle EXAMPLE HERE
Change the condition as (((event.which == 46 || event.which == 45 || $(this).val().indexOf('.') != -1)) || (event.which < 48 || event.which > 57)). on keypress event
$(document).ready(function() {
$('#used_quantity').keypress(function(event) {
if (((event.which == 46 || event.which == 45 || $(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="used_quantity">
Try this :
$('#used_quantity').bind("change input", function () {
var value = $(this).val().replace(/([^0-9].*)/g, "");
$(this).val(value);
})
Related
I am writing a code for number field where i have disabled all keys except number keys
function doValidation(event) {
var charCode = event.keyCode;
if (charCode != 190 && charCode != 40 && charCode != 39 && charCode != 38 && charCode != 37 && charCode != 46 && charCode > 31 && (charCode < 48 || charCode > 57) && (charCode < 96 || charCode > 105))
return false;
}
<input type="text" onkeydown="doValidation(event)">
Now i want to enable ctrl+c and ctrl+v in this funtion.
you can do this like below :)
var is_ctrl_pressed = false;
$('#number_input').on('keydown', function(e) {
var code = e.which;
if ((code > 47 && code < 59) || (code > 95 && code < 106) || (is_ctrl_pressed && (code == 67 || code == 86))) {
return true;
} else if (code == 17) {
is_ctrl_pressed = true;
} else {
return false;
}
});
$('#number_input').on('keyup', function(e) {
if (e.which == 17) {
is_ctrl_pressed = false;
}
});
Hope this will be helpful.
$('input[type="number"]').keypress(function(e){
//Numbers 47 to 57 are the key code of digit 0 to 9.
if (![48,49,50,51,52,53,54,55,56,57].includes(e.keyCode)){
e.preventDefault();
}
});
// Disable Right click
document.addEventListener('contextmenu', event => event.preventDefault());
// Disable key down
document.onkeydown = disableSelectCopy;
// Disable mouse down
document.onmousedown = dMDown;
// Disable click
document.onclick = dOClick;
function dMDown(e) { return false; }
function dOClick() { return true; }
function disableSelectCopy(e) {
// current pressed key
var pressedKey = String.fromCharCode(e.keyCode).toLowerCase();
if ((e.ctrlKey && (pressedKey == "c" || pressedKey == "x" || pressedKey == "v" || pressedKey == "a" || pressedKey == "u")) || e.keyCode == 123) {
return false;
}
}
For example i have 3 function that i control the keydown of each field; at the end i control the same so i want to put the 3 fields with code 1 time only.
ens_q_frio.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) {
} else {
event.preventDefault();
}
if ($(this).val().indexOf('.') !== -1 && event.keyCode == 190)
event.preventDefault();
});
ens_q_cal.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) {
} else {
event.preventDefault();
}
if ($(this).val().indexOf('.') !== -1 && event.keyCode == 190)
event.preventDefault();
});
ens_t_frio.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) {
} else {
event.preventDefault();
}
if ($(this).val().indexOf('.') !== -1 && event.keyCode == 190)
event.preventDefault();
});
Have the argument of keydown as a separate function and then just pass it instead. You can also use forEach if your fields are in an array
Create a function:
function validate(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) {
} else {
event.preventDefault();
}
if($(this).val().indexOf('.') !== -1 && event.keyCode == 190)
event.preventDefault();
}
And pass it to the event:
ens_t_frio.keydown(validate);
Do the same thing for other inputs.
you can put it in a function and have it on each event handler.
$(function(){
$("#ens_q_frio").keydown(function(event){
KeyDownEvent("ens_q_frio", event);
});
$("#ens_q_cal").keydown(function(event){
KeyDownEvent("ens_q_cal", event);
});
$("#ens_t_frio").keydown(function(event){
KeyDownEvent("ens_t_frio", event);
});
})
function KeyDownEvent(txtBox, 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) {
}
else {
event.preventDefault();
}
if($("#" + txtBox).val().indexOf('.') !== -1 && event.keyCode == 190)
event.preventDefault();
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="text" id="ens_q_frio"/>
<input type="text" id="ens_q_cal"/>
<input type="text" id="ens_t_frio"/>
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;
This is my code
$(currentClass).keypress(function (e) {
if (e.which != 8 && e.which != 0 && (e.which < 48 || e.which > 57)) {
return false;
}
});
The only problem with this is that, every time I hit a key for the first time regardless a letter or a number, it shows up in my content editable span tag. However, the second time I hit a letter key the code works, it only accepts number. I have no idea what is wrong with this code in the first pressing of keys.
Use JQuery's .on() method.
$(currentClass).on("keypress",function (e) {
if (e.which != 8 && e.which != 0 && (e.which < 48 || e.which > 57)) {
return false;
}
});
This is what I used
if ($.inArray($event.keyCode, [46, 8, 9, 27, 13, 110, 190]) !== -1 ||
// Allow: Ctrl+A
($event.keyCode == 65 && $event.ctrlKey === true) ||
// Allow: home, end, left, right
($event.keyCode >= 35 && $event.keyCode <= 39)) {
// let it happen, don't do anything
return;
}
// Ensure that it is a number and stop the keypress
if (($event.shiftKey || ($event.keyCode < 48 || $event.keyCode > 57)) && ($event.keyCode < 96 || $event.keyCode > 105)) {
$event.preventDefault();
}
I was able to solve the problem with this. If their suggestion is not working try this.
Bind Properly your events
$(document).ready(function(){
$(body).on("keypress","currentClass",function (e) {
if (e.which != 8 && e.which != 0 && (e.which < 48 || e.which > 57)) {
return false;
}
});
});
$(currentClass).on('keypress', function (e) {
if (e.which != 8 && e.which != 0 && (e.which < 48 || e.which > 57)) {
e.preventDefault();
alert("pressed");
return false;
}
});
event - on
This might helps you :)
I have many input types in the form .Now i want that the user can enter only integer values in the input types.The input can be like this 110.00 only two values after ..But i am not able to get this features.
I have done with the interger input but i am not getting how can we do this :
Code
$(".amount_class").live("keypress",function(e){
var charCode = (e.which) ? e.which : e.keyCode;
var Enteted = String.fromCharCode(e.which).toLowerCase();
if ((charCode >= 48 && charCode <= 57) || charCode == 8 || charCode == 9 || charCode == 37 || charCode == 39 || (charCode == 46 && Enteted != '.'))
return true;
else
return false;
});
The values are amount and it can be decimal but not more than two after decimal sign.Please help me
I have done this and working fine for me :
$('.salary').live("keypress",function(e) {
var charCode = (e.which) ? e.which : e.keyCode;
var Enteted = String.fromCharCode(e.which).toLowerCase();
if(!((charCode >= 48 && charCode <= 57) || charCode == 8 || charCode == 9 || (charCode == 37 && Enteted !='%') || charCode == 39 || charCode == 46)) {
e.preventDefault();
}
if(charCode == 46 && $(this).val().indexOf('.') != -1 && Enteted ==".") {
e.preventDefault();
} // prevent if already dot
if(charCode == 46 && Enteted =="." && !$(this).val()) {
e.preventDefault();
}
if($(this).val().indexOf('.')!=-1){
if($(this).val().split(".")[1].length >= 2){
if(charCode != 8 && charCode != 46) e.preventDefault();
if( isNaN( parseFloat( this.value ) ) ) return;
this.value = parseFloat(this.value).toFixed(2);
}
}
return this;
});
Use as below
HTML
<input type="text" id="checkDecimal" class="decimal" />
JS
$(function () {
$('#checkDecimal').bind('paste', function () {
var self = this;
setTimeout(function () {
if (!/^\d*(\.\d{1,2})+$/.test($(self).val())) $(self).val('');
}, 0);
});
$('#checkDecimal').keypress(function (e) {
var character = String.fromCharCode(e.keyCode)
var newValue = this.value + character;
if (isNaN(newValue) || parseFloat(newValue) * 100 % 1 > 0) {
e.preventDefault();
return false;
}
});
});
have a look here.
Regex - /^\d+(\.\d{0,2})?$/g;
i have experimented here
<!DOCTYPE html>
<html>
<head>
<script
src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$('#input_field').keyup(function(e) {
var regex = /^\d+(\.\d{0,2})?$/g;
if (!regex.test(this.value)) {
this.value = '';
}
});
});
</script>
</head>
<body>
<input type= "text" id = "input_field" name ="input_field" value=""/>
</body>
</html>
The logic is every time a user entering a number you have to check two things.
Has the user entered decimal point?
Are the decimal places more than two?
For the first one you can use $(this).val().indexOf('.') != -1For the second one you can use $(this).val().substring($(this).val().indexOf('.'), $(this).val().indexOf('.').length).length > 2
Here is the code:
$('.amount_class').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();
}
});
And the DEMO
Simply use
value.toFixed(2);
thats it..