I have a textbox with numeric inputs. Here is my javascript set to numeric textbox. But when I try to input letters, "e" is allowed. Problem: What I want to do is no letter should be allowed, only numeric numbers and no negative integer.
HTML:
<input type="numeric" id="usrid" name="usrid" placeholder="Enter number">
Javascript:
$(document).ready(function() {
$("#usrid").numeric();
});
You can use the type="number" and min=0 attributes in your input to enforce validation on these fields:
<input type="number" id="usrid" name="usrid" min=0 placeholder="Enter number">
However, this won't prevent input of negative or non-numeric characters into the input field. For that you'll need to bind a javascript event:
$('#usrid').bind('keypress', function (event) {
var regex = new RegExp("^[0-9]+$");
var key = String.fromCharCode(!event.charCode ? event.which : event.charCode);
if (!regex.test(key)) {
event.preventDefault();
return false;
}
});
you can try this
<form>
Quantity (between 1 and 5):
<input type="number" name="quantity" min="1" max="5"><br>
<input type="submit">
</form>
in this page you can find more example about of limit of number, in html
http://www.w3schools.com/tags/att_input_max.asp
If you want to take only the number input then input type should be number like following
<input type="number" id="usrid" name="usrid" placeholder="Enter number">
but it takes the letter 'e' which is stands for exponential value.Better you have try the following which use js to validate the input using on 'keypress'
HTML code:
<input type="input" id="usrid" name="usrid" placeholder="Enter number">
JavaScript Code:
<script type="text/javascript">
$(document).ready(function() {
$('[id^=usrid]').keypress(validateNumber);
});
function validateNumber(e) {
var key = window.e ? e.keyCode : e.which;
if (e.keyCode === 8 || e.keyCode === 46
|| e.keyCode === 37 || e.keyCode === 39) {
return true;
}
else if ( key < 48 || key > 57 ) {
return false;
}
else return true;
};
</script>
Related
The code below prevents negative numbers in input for numbers but does not allow me to enter decimals if I clear input and try to enter let's say 0.41
<input class='input2' oninput="this.value =
!!this.value && Math.abs(this.value) >= 0 ? Math.abs(this.value) : null" type='number' step='0.1' id='success' />
Update
The code below allows decimals and prevents negative numbers but it does not allow me to place any condition. I also want to have one more condition of value can't be greater than 1: max = "1" not working
<input class='input2' min="0" max = "1" onkeypress="return event.charCode != 45" type='number' step='0.1' id='success'/>
var input = document.getElementById("success");
input.addEventListener("keyup", function(event) {
// Number 13 is the "Enter" key on the keyboard
if (event.keyCode === 13) {
// Cancel the default action, if needed
event.preventDefault();
if (input.value < 0)input.value = -input.value
if(input.value > 1)input.value = 1
}
});
<input class='input2' min=0 max=1 type='number' step='0.1' id='success' />
I am using charcode so that user can input only number, special-character and comma.
<input type="text" class="form-control numOnly"
onkeypress="return event.charCode >= 48 && event.charCode <= 57">
Right now it is accepting only number but I want to allow special character and comma using charcode.
what am I missing?
Try Below
<input type="text" class="form-control numOnly" onkeypress="return event.charCode >= 32 && event.charCode <= 57">
<input type="text" class="form-control numOnly" onkeypress="return Validate(event);">
<script type="text/javascript">
function Validate(event) {
var regex = new RegExp("^[0-9-!##$%*?,]");
var key = String.fromCharCode(event.charCode ? event.which : event.charCode);
if (!regex.test(key)) {
event.preventDefault();
return false;
}
}
</script>
Here you can view all the javascript charcodes.
https://www.cambiaresearch.com/articles/15/javascript-char-codes-key-codes
The comma one for example is 188.
You can also use https://github.com/KevinSheedy/jquery.alphanum to facilitate your life.
Edit: I noticed you have a class named NumOnly there. Is it only for styling?
I am trying to add a text box which accepts only integers between 1 and 99. I tried adding a number type element with min and max but that works only when changing the number using the ticker
<input type="number" min="1" max="99" />
May I know a better way to achieve this?
UPDATE:
I would like to immediately validate the input like may be by replacing the entry with an empty character.
You can use JavaScript to validate the input on a key event (such as keyup). Here's an example that will clear out anything that's not an integer between 1 and 99.
var inputBox = document.getElementById('inputBox');
inputBox.addEventListener('keyup', function(e) {
inputBox.value = "" + inputBox.value;
if (e.which < 48 || e.which > 57) {
// if not an integer
clearInput();
return;
}
if (inputBox.value.toLowerCase() !== inputBox.value.toUpperCase()) {
// if a letter
clearInput();
return;
}
if (parseInt(inputBox.value) < 1 || parseInt(inputBox.value) > 99) {
// if value is not in the desired range
clearInput();
return;
}
});
function clearInput() {
// invalid entry -- clear out input box
inputBox.value = "";
}
inputBox.focus(); // this is just for ease of testing
<input id="inputBox" type="number" min="1" max="99" />
How about this? This shouldn't allow for negative numbers, and you're restricted to only 2 characters.
<input type="number" min="1" max="99" maxlength="2" />
I am trying restrict a user from entering more than 4 digits.
For that I am using:
$("#YEAR").mask("(9999)");
But I'm getting the following error:
JavaScript runtime error: Object doesn't support property or method 'mask'
Do I need to include a library for it?
A simple solution could be:
$(function () {
$('#YEAR').on('keypress', function(e) {
var charCode = (e.which) ? e.which : event.keyCode
if (charCode < 48 || charCode > 57) {
return false;
}
return true;
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<input type="text" maxlength="4" id="YEAR" name="YEAR"/>
</form>
How can I remove/disallow entering a dot . on my textbox?
Bind an event to your input tag
<input type="text" onkeypress="return preventDot(event);" />
Then create a function like preventDot that will return false and prevent the key from being entered if the . key is pressed
function preventDot(e)
{
var key = e.charCode ? e.charCode : e.keyCode;
if (key == 46)
{
return false;
}
}
http://jsfiddle.net/Bf6Xq/6/
Is this what you mean?
JavaScript:
function preventDot(id)
{
str = document.getElementById(id).value;
document.getElementById(id).value = (str.replace(".",""));
}
HTML:
<input type="text" id="input" onkeyup="preventDot(this.id)" />