I'm having some trouble adding validation for stops to my input box. The restriction on allowing numbers only (second condition) works, but the first condition may as well not exist. Full stops and decimal points still do not appear in the input box.
function isNumberKey(evt) {
var charCode = (evt.which) ? evt.which : event.keyCode
if (charCode == 110 || charCode == 190)
return true;
else if (charCode > 31 && (charCode < 48 || charCode > 57))
return false;
return true;
}
Additionally, I've noticed that the behaviour of this JS is different across browsers. in FireFox, I can use the numeric keypad to enter a value. However, in Chrome I am limited to the top row of numbers. Neither browser allows decimal points.
onkeypress won't report the key codes, it will report the ASCII character typed. You want onkeydown
function isNumberKey(evt) {
var charCode = (evt.which) ? evt.which : event.keyCode
if (charCode == 110 || charCode == 190)
return true;
else if (charCode > 31 && (charCode < 48 || charCode > 57))
return false;
return true;
}
document.getElementById('foo').onkeydown = isNumberKey;
<input type="text" id="foo" />
Related
I am using a script to format the input for my textbox. I only want to use the characters - and . 1 time and only be able to add numbers into this textbox. After editing I want to round the input to 2 decimals.
I have no problems with the input.
When I want to delete the input I run into problems.
I am not able to delete the input in Mozilla Firefox. I dont have any issues in Google Chrome or Internet Explorer.
Does someone know how I can solve this issue?
Here is my script:
<input type="text" class="groupOfTexbox" onchange="setTwoNumberDecimal(this)" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>
function setTwoNumberDecimal(el) {
el.value = parseFloat(el.value).toFixed(2);
};
$(document).ready(function() {
$('.groupOfTexbox').keypress(function (event) {
return isNumber(event, this)
});
});
function isNumber(evt, element) {
var charCode = (evt.which) ? evt.which : event.keyCode
if (
(charCode != 45 || $(element).val().indexOf('-') != -1) &&
(charCode != 46 || $(element).val().indexOf('.') != -1) &&
(charCode < 48 || charCode > 57))
return false;
return true;
}
</script>
JSFiddle: http://jsfiddle.net/5zduh3a7/1/
Include backspace (code = 8) into your whitelist:
function isNumber(evt, element) {
var charCode = (evt.which) ? evt.which : event.keyCode
if ((charCode != 45 || $(element).val().indexOf('-') != -1) &&
(charCode != 46 || $(element).val().indexOf('.') != -1) &&
(charCode < 48 || charCode > 57) &&
(charCode != 8)) {
return false;
}
return true;
}
Also note that it's better to use keydown/keyup instead of keypress for such cases. It seems that IE and Chrome doesn't trigger keypress events for some special keys like backspace. That's why your code works in IE and Chrome even without whitelisting backspace key code.
function AllowOnlyNumbers(evt) {
var charCode = (evt.which) ? evt.which : event.keyCode
if (charCode > 31 && (charCode < 48 || charCode > 57)){
if (charCode === 8 && charCode === 46) {
return false;
}
}
return true;
}
How to allow only numbers and delete key or backspace to be written in this textbox ?
Why not use input of type number <input type="number" /> for browsers that supports it, otherwise use javascript:
function AllowOnlyNumbers(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;
}
Here is a fiddle: http://jsfiddle.net/Lm2hS/
From: https://stackoverflow.com/a/7295864/235659
I have created this solution for your problem here:
https://codebrace.com/editor/b05f92054
Here I have used event.charCode == 0 to allow non characters key pressed (To allow delete, backspace and other non-character keys) and isNaN to check if the value entered is a number or not.
I hope this helps!
I have this code it's working but it's accept small letter (e) and big (E)
How can I prevent that? I've seen some similar codes that also accepts (e & E)
function isNumberKeyDecimal(evt)
{
var charCode = (evt.which) ? evt.which : event.keyCode
if (charCode > 31 && (charCode < 48 || charCode > 57) && charCode != 46)
return false;
return true;
}
I am using this code to allow only digits to type in textbox but now I want to allow . too. I modified this code but not working.
function isNumberKeyDotAllowed(evt) {
var charCode = (evt.which) ? evt.which : event.keyCode
if (charCode > 31 && (charCode < 48 || charCode > 57) && charCode == 46)
return false;
return true;
}
TextBox declaration in markup:
<asp:TextBox runat="server" ID="txtBoxApplicantCNICNo"
onkeypress="return isNumberKeyDotAllowed(this)" AutoPostBack=True
OnTextChanged="txtCHan_event" CssClass="form-control">
I see two problems with your code. The first is that you pass this as the argument to isNumberKeyDotAllowed while you should pass event:
onkeypress="return isNumberKeyDotAllowed(event);"
The second is the validation condition. Here is my own version of the function. I defined the condition for success instead of the condition for failure, because it is easier for me to figure out:
function isNumberKeyDotAllowed(evt) {
var charCode = evt.which ? evt.which : evt.keyCode;
if (charCode == 46 || (48 <= charCode && charCode <= 57)) {
return true;
}
else {
return false;
}
}
In my application i wrote java script validation for a text field (user name). So it allows only alphabets, spaces, back-space and arrows to move previous and next alphabets in the text field. my code is working fine in the mozila firefox but coming to chrome and IE its not allowing arrow keys.
My code is like this..
<input class="form-control input-lg" onkeypress="return isCharacterKey(event)" onkeyup="capitalize(this)" id="firstNameSpaceCapital"/>
//This function allows space,backspace,alphabets and arrow keys
function isCharacterKey(evt) {
var charCode = (evt.which) ? evt.which : evt.keyCode;
if (charCode == 32 || charCode == 8 || (charCode >= 37 && charCode <= 40) || (charCode >= 65 && charCode <= 90) || (charCode >= 97 && charCode <= 122)) {
return true;
}
return false;
}
//This method is used to capitalize the first letter in the text field
function capitalize(obj) {
obj.value = obj.value.charAt(0).toUpperCase() + obj.value.slice(1);
}
//This method is used to capitalize the first letter after space
$('#firstNameSpaceCapital').on('keyup', function () {
$(this).val(function (i, val) {
return val.replace(/(\s)(\S)/g, function ($0, $1, $2) {
return $1 + $2.toUpperCase();
});
});
});
I'd tackle your issue like this:
Notice for the capitalization only css is needed (for the case you presented at least)
FIDDLE
html
<input class="form-control input-lg" id="firstNameSpaceCapital" />
css
.input-lg {text-transform:capitalize;}
js
$('#firstNameSpaceCapital').on('keypress', isCharacterKey);
function isCharacterKey(evt) {
var charCode = (evt.which) ? evt.which : evt.keyCode;
if (charCode == 32 || charCode == 8 || (charCode >= 37 && charCode <= 40) || (charCode >= 65 && charCode <= 90) || (charCode >= 97 && charCode <= 122)) {
return true;
}
evt.preventDefault();
}
good luck!
return isCharacterKey(event)
event is undefined, use this instead.
return isCharacterKey(this)
I think it's a bad idea to catch keyboard events. 'Cause user can paste some text using mouse. So, I'd recommend to use oninput event