Preventing User from entering Decimals using JavaScript - javascript

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

Related

Textbox in Firefox cannot CTRL + V (Paste) after some updates

Before some Firefox update, my app is working fine but after that I cannot CTRL + V (doing Right Click -> Paste is still working fine) anymore. Any idea for this problem?
This is aspx code on the page:
<td width="50%">
<input type="text" maxlength="10" id="RequestID" value="<% =RequestId %>" name="Request_ID"
onload="document.LBS.Request_ID.focus()" onkeypress="if (fnCheckKeyPress(event) == false) {event.returnValue = false; return false;}" />
</td>
The problem is on the "onkeypress" field. If I delete that then it works just fine, but it cannot filter text (it suppose to have only digits) anymore. The function is called from the js file:
function fnCheckKeyPress(event) {
// KeyCode Info: 13-ENTER ; 27-ESC ; 9-TAB ; 8-BACKSPACE ; 46-DELETE
var nKeyCode = event.keyCode ? event.keyCode : event.which ? event.which : event.charCode;
//alert(nKeyCode);
if (nKeyCode == 13) return false;
if (navigator.userAgent.indexOf("Firefox") != -1) {
if (event.keyCode >= 3 && event.keyCode <= 39) return true;
if (arguments.length > 0 && arguments[0].isChar == false && arguments[0].ctrlKey == true) return true;
}
if (nKeyCode < 46 || nKeyCode > 57) return false;
return true;
}

How to disable numeric input datepicker?

I require some help with this issue. I want ONLY backspace and arrow keys working in the "Date1" field. I saw that once it becomes a "datepicker" field with the code below, numeric symbols and "/" is allowed. Can I disable this so that ONLY backspace and arrow keys work? Don't want people typing in random numbers..
<script>
var dateToday = new Date();
$(function() {
$( "#Date1" ).datepicker({
numberOfMonths: 1,
showButtonPanel: true,
minDate: dateToday
});
});
</script>
<script>
var o = document.getElementById('Date1');
o.addEventListener( 'keydown', function( e ) {
if( e.keyCode >= 37 && e.keyCode <= 40 ) {
return;
}
if( e.keyCode === 8 || e.keyCode === 58 ) {
return;
}
e.preventDefault( );
}, false );
</script>
<input type="text" id="Date1" name="Date1">
Now, it's working as intended. I can't use all the letter keys on the keyboard i
Why don't you mark your input readonly="true" to disable input.
<input type="text" id="Date1" name="Date2" readonly="true">
This will serve the purpose.
Update
As you stated that clearing the input field should be allowed. Please update your listener to this
o.addEventListener('keydown', function( e ) {
switch(e.keyCode){
case (e.keyCode >= 37 && e.keyCode <= 40 ):
case ( e.keyCode === 8 || e.keyCode === 58 ):
case (e.keyCode >= 48 && e.keyCode <= 57);
return;
default:
console.log(e.keyCode); // do something for default
}
e.preventDefault( );
}, false );

prevent user from entring 0 as a input

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);
}
});

How to restrict a field to take only 4 numeric characters as input and get's an alert in div

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;

working with onkeypress event issue

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

Categories

Resources