allow only float number with backspace and left and right arrow - javascript

I want to allow only one . in textfield, with backspace, left and right arrow.
I found this this link.
only allow numbers, backspace, delet, left arrow and right arrow keys in textbox
I addded one more validation in above code, so that user can add only . in textfield, but it's not working.
JS
function validateQty(event) {
var key = window.event ? event.keyCode : event.which;
if (event.keyCode == 8 || event.keyCode == 46 || event.keyCode == 37 || event.keyCode == 39 ) {
if($(this).val().indexOf('.') == -1)
return true;
else
return false;
}
else if ( key < 48 || key > 57 ) {
return false;
}
else return true;
};
JSFiddle

The problem as I see it is that in the line if($(this).val().indexOf('.') == -1), the this is the Window object not the input control.
Try adding an ID to the input control and reference the same in the code as:
function validateQty(event) {
var key = window.event ? event.keyCode : event.which;
if (event.keyCode == 8 || event.keyCode == 46 || event.keyCode == 37 || event.keyCode == 39 ) {
if($('#IdofInputControl').val().indexOf('.') == -1)
return true;
else
return false;
}
else if ( key < 48 || key > 57 ) {
return false;
}
else return true;
};
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" ID="IdofInputControl" onkeypress='return validateQty(event);'>
And your validation should work!

function isNumber(evt) {
evt = (evt) ? evt : window.event;
var charCode = (evt.which) ? evt.which : evt.keyCode;
if (charCode > 31 && (charCode < 48 || charCode > 57)&&(evt.which != 46 || $('#refAmount').val().indexOf('.') != -1)) {
return false;
}
return true;
}

You can use following code with some modifications of keys which you want to use or not.
jQuery("#YourSelector").keypress(function (evt) {
var charCode = (evt.which) ? evt.which : evt.keyCode;
if (charCode != 46 && charCode > 31 && (charCode < 43 || charCode > 57)){
return false;
}else{
return true;
}
});

Related

Function for alpha and single space only

I have a function to make people enter alphabet only onkeypress
function isAlfa(evt) {
evt = (evt) ? evt : window.event;
var charCode = (evt.which) ? evt.which : evt.keyCode;
if (charCode > 32 && (charCode < 65 || charCode > 90) && (charCode < 97 || charCode > 122)) {
return false;
}
return true;
}
I have another function to prevent them from typing double spaces
function checkstuff(event){
if(event.target.value.substr(-1)=== ' ' && event.code === 'Space')
{
//alert('space clicked twice');
//remove space from the last.
event.target.value = event.target.value.substr(0,event.target.value.length-1);
}
debugger;
var evt = (event) ? event : window.event;
var charCode = (evt.which) ? evt.which : evt.keyCode;
if (charCode > 32 && (charCode < 65 || charCode > 90) && (charCode < 97 || charCode > 122)) {
console.log(charCode)
return false;
}
console.log('valid '+charCode)
return true;
}
I've been trying to put the two together into one function with no success. I tried running them both onkeypress, but it only runs the first. How can I merge the 2 functions?
After the part of alphabetical checking, you can add the function to check the double spaces as follows.
function isAlfa(evt) {
evt = (evt) ? evt : window.event;
var charCode = (evt.which) ? evt.which : evt.keyCode;
if (charCode > 32 && (charCode < 65 || charCode > 90) && (charCode < 97 || charCode > 122)) {
return false;
}
if(evt.target.value.substr(-1) === ' ' && evt.keyCode === 32) {
return false;
}
return true;
}
<input type="text" onkeypress="return isAlfa(event)" />
Use state for the previous input
const spaceCode = 32;
var lastCharCode = undefined;
function isAlfa(evt) {
evt = (evt) ? evt : window.event;
var charCode = (evt.which) ? evt.which : evt.keyCode;
if (lastCharCode == spaceCode && charCode == spaceCode) {
throw new Error('No double space allowed');
}
lastCharCode = charCode;
if (charCode > 32 && (charCode < 65 || charCode > 90) && (charCode < 97 || charCode > 122)) {
return false;
}
return true;
}

SHIFT+HOME and SHFT+left/right keys for text fields not working

I am using Struts2 <s:textfield /> tag and the below code calculates and checks / validates the value entered in the text field on the fly with JS.
It also updates the total entered in textfield list, these are handled by onblur and onkeydown events as below.
<s:textfield id = "fieldid"
name = "xyz"
onblur = "javascript:calculateTotal()"
onkeydown = "javascript:checkDecimal(this); return checkDecimal(event);"
/>
By using this code SHIFT+HOME , SHIFT+Left and SHIFT+Right keys functionalities are not working.
Is there any possibilities that this is due to onblur and onkeydown events ?
function checkDecimal(evt) {
var charCode;
var version = msieversion();
if(version==8){
charCode = (window.event) ? evt.keyCode : evt.which;
charCode = (window.event) ? evt.keyCode : evt.which;
}else{
charCode = (evt.which) ? evt.which : evt.keyCode;
}
if (!evt.shiftKey) {
if ((charCode >= 48 && charCode <= 57) ||
(charCode == 8) ||
(charCode == 46) ||
(charCode == 190) ||
(charCode == 35 ) ||
(charCode == 36) ||
(charCode == 9) ||
(charCode == 37) ||
(charCode == 39) ||
(charCode >= 96 && charCode <= 105) ||
(charCode == 110))
{
return true;
} else {
return false;
}
} else {
if (charCode == 9) {
return true;
} else {
return false;
}
}
}
You need to use the keypress event instead of the keydown one.
The keypress will intercept the resultant character,
while the keydown will interpret the SHIFT as a button itself.
Then try using
<s:textfield id = "fieldid"
name = "xyz"
onblur = "javascript:calculateTotal()"
onkeypress = "javascript:checkDecimal(this); return checkDecimal(event);"
/>
Code will look like this...
if (!evt.shiftKey) {
if ((charCode >= 48 && charCode <= 57) ||
(charCode == 8) ||
(charCode == 46) ||
(charCode == 190) ||
(charCode == 35 ) ||
(charCode == 36) ||
(charCode == 9) ||
(charCode == 37) ||
(charCode == 39) ||
(charCode >= 96 && charCode <= 105) ||
(charCode == 110))
{
return true;
} else {
return false;
}
} else if(evt.shiftKey) {
if ((charCode == 35 ) || (charCode == 39) || (charCode == 37) || (charCode == 36)) {
return true;
}
}
I assume you need to validate and allow only the decimal values. In that case this snippet will do the job.
<input id = "fieldid"
name = "xyz"
onblur = "javascript:calculateTotal()" onkeypress="return checkDecimal(event);" />
<script>
function isNumeric(n) {
return !isNaN(parseFloat(n)) && isFinite(n);
}
function checkDecimal(evt) {
var charCode = (window.event) ? evt.keyCode : evt.which;
var currentVal = String.fromCharCode(charCode);
var val = document.getElementById(evt.currentTarget.id).value + '' + currentVal;
return (evt.shiftKey || isNumeric(val) || isNumeric(currentVal) || String.fromCharCode(currentVal) == '.');
}
</script>
Please feel free to correct me if I was not read the question correctly.

How to avoid entering special characters in JavaScript

On html I have one input box in which I just want to enter numeric values. I used following function:
function allowNumbersOnly(event,locale) {
if(locale=='en' && (event.keyCode==190 || event.keyCode==110)){
return true;
}
else if(locale=='nl' && (event.keyCode==188 || event.keyCode==190 || event.keyCode==110)){
return true;
}
if(event.keyCode==189 || (event.keyCode==109) ){
return true;
}
var key = event.charCode || event.keyCode || 0;
// allow backspace, tab, delete, arrows, numbers and keypad numbers ONLY
if (
key == 8 ||
key == 9 ||
key == 46 ||
(key >= 37 && key <= 40) ||
(key >= 48 && key <= 57) ||
(key >= 96 && key <= 105)){
}else{
event.preventDefault();
}
}
This code works fine. But when I am pressing shift key+ any number from keyboard then special character gets entered. Can anyone tell me how to solve this issue?
Try the following function
function isNumber(evt) {
evt = (evt) ? evt : window.event;
var charCode = (evt.which) ? evt.which : evt.keyCode;
if (charCode > 31 && (charCode < 48 || charCode > 57)) {
return false;
}
return true;
}
If you are using HTML5 just try
<input type="number">
Try like this:
function blockspecialcharacter(e) {
var key= document.all ? key= e.keyCode : key= e.which;
return ((key > 64 && key < 91) || (key> 96 && key< 123) || key== 8 || key== 32 || (key>= 48 && key<= 57));
}
Check demo here
shiftKey event attribute returns a Boolean value that indicates whether or not the "SHIFT" key was pressed
if (event.shiftKey==1)
{
alert("The shift key was pressed!")
}
else
{
alert("The shift key was NOT pressed!")
}
so you can exit from your function if shift is pressed using value of event.shiftKey
// in your code
function allowNumbersOnly(event,locale) {
if (event.shiftKey==1) {
return false;
} // RETURN if shift key got clicked.
if (locale=='en' && (event.keyCode==190 || event.keyCode==110)) {
return true;
}
else if (locale=='nl' && (event.keyCode == 188 ||
event.keyCode == 190 ||
event.keyCode == 110)) {
return true;
}
if (event.keyCode==189 || (event.keyCode==109)) {
return true;
}
var key = event.charCode || event.keyCode || 0;
// allow backspace, tab, delete, arrows, numbers and keypad numbers ONLY
if (key == 8 ||
key == 9 ||
key == 46 ||
(key >= 37 && key <= 40) ||
(key >= 48 && key <= 57) ||
(key >= 96 && key <= 105)) {
}
else {
event.preventDefault();
}
}
Try this:
function blockSpecialChars(e){
var e = e || window.event;
var k = e.which || e.keyCode;
var s = String.fromCharCode(k);
return !/^[\\\"\'\;\:\>\|~`!##\$%^&*\(\)]$/i.test(s);
}
Add or remove the special characters from the above code to make it as you need.

Number validate at keypress

I validate the phone number using below code its working fine but i allow char at first time while user entering the values. how i can solve it. . . .
$('.Number').keypress(function () {
$('.Number').keypress(function (event) {
var keycode;
keycode = event.keyCode ? event.keyCode : event.which;
if (!(event.shiftKey == false && (keycode == 46 || keycode == 8 ||
keycode == 37 ||keycode == 39 || (keycode >= 48 && keycode <= 57)))) {
event.preventDefault();
}
});
});
The first character is unrestricted because you have nested keypress handlers. Try this:
$('.Number').keypress(function (event) {
var keycode = event.which;
if (!(event.shiftKey == false && (keycode == 46 || keycode == 8 || keycode == 37 || keycode == 39 || (keycode >= 48 && keycode <= 57)))) {
event.preventDefault();
}
});
Try
$('.Number').keyup(function (event) {
var keycode = event.which;
if (!(event.shiftKey == false && (keycode == 46 || keycode == 8 || keycode == 37 || keycode == 39 || (keycode >= 48 && keycode <= 57)))) {
event.preventDefault();
}
});
Here is a function that will validate the input. It will return true if the value is a number, false otherwise. Numbers are charcode 48 - 57. This function also allows all control characters to return true. (<32)
function isNumber(evt)
{
evt = (evt) ? evt : window.event;
var charCode = (evt.which) ? evt.which : evt.keyCode;
if (charCode > 32 && (charCode < 48 || charCode > 57)) {
return false;
}
return true;
}
Here is a chart of the codes.
<html>
<head>
<title>number validation</title>
<script>
function checkNumber(check)
{
var a = document.getElementById("txt_contact_no").value;
//var x=check.which;
//var x = a.charCode;
var x = a.keyCode;
if(!(a >= 48 || a <= 57))
{
alert("enter only numbers");
return false;
}
else if(a=="" || a==null)
{
alert("field is blank");
return false;
}
// if no is more then the value
/*else if (a.length <= 9)
{
alert("enter minimum 10 characters");
return false;
}*/
alert("done");
return true;
}
</script>
</script>
</head>
<body>
<table>
<form name=form1 method=post action="#">
<tr>
<td>
<b>Subjects</b><input type="text" name="contact_no" id="txt_contact_no" onblur="checkNumber(this)">
</td>
</tr>
<tr>
<td><p id="p1"></p></td>
</tr>
</form>
</table>
</body>
This is the simplest solution for KeyPress Number Events:
$(document).ready(function(){
$(".Number").keypress(function(event){
var keycode = event.which;
if (!(keycode >= 48 && keycode <= 57)) {
event.preventDefault();
}
});
});

Enable dot and Tab in textboxes

I have text boxes which only allow to enter numeric values. I handled it using a JavaScript. But it doesn't allow me to enter dot and tab movement. I need those two as well. How to change this code to enter dot symbol and tab movement.
function CheckNumeric(e) {
if (window.event) // IE
{
if ((e.keyCode < 48 || e.keyCode > 57) & e.keyCode != 8) {
event.returnValue = false;
return false;
}
}
else // Fire Fox
{
if ((e.which < 48 || e.which > 57) & e.which != 8) {
e.preventDefault();
return false;
}
}
this code is tested and works..this may help u..!!
<script type="text/javascript">
function onlyDotsAndNumbers(txt, event) {
var charCode = (event.which) ? event.which : event.keyCode
if (charCode == 46) {
if (txt.value.indexOf(".") < 0)
return true;
else
return false;
}
if (charCode > 31 && (charCode < 48 || charCode > 57))
return false;
return true;
}
> <asp:TextBoxID="txt1"runat="server"onkeypress="return onlyDotsAndNumbers(this,event)"/>

Categories