I am trying to limit a few input fields that would allow the user to input -100(min) and up to 100(max), while allow two decimal places. This one is tricky, so it should allow 99.99 but not allow 100.01. Also allow -99.99 but not -100.01, upon key-down it needs to remove what ever is wrong and prevent the user from entering an more characters If they hit -100 or 100 or -99.xx or 99.xx.
My code so far but is behaving very speraticly:
$(document).off('keyup keydown', 'input.NegativeHundredPercentMax');
$(document).on('keyup keydown', 'input.NegativeHundredPercentMax', function(e) {
var $myInput = $(this);
if ($myInput.val().length <= 4 ) {
if ($myInput.val() <= -101) {
e.preventDefault();
$myInput.val($myInput.val().slice(0, 3));
}
} else {
if ($myInput.val() <= -101) {
e.preventDefault();
$myInput.val($myInput.val().slice(0, 4));
}
}
});
you can do that using HTML5 something like this should help
<input type="number" name="quantity" min="-100" max="100" step="0.01">
HTML5 alone can handle an input which:
takes only numbers
has a minimum entry of -100
has a maximum entry of 100
increments in 100ths
This will do it:
<input type="number" name="myNumber" min="-100" max="100" step="0.01" value="1" />
Working Example:
<input type="number" name="myNumber" min="-100" max="100" step="0.01" value="1" />
I corrected the issue by removing all complexity.
$(document).off('keyup keydown', 'input.NegativeHundredPercentMax');
$(document).on('keyup keydown', 'input.NegativeHundredPercentMax', function(e) {
var $myInput = $(this);
if ($myInput.val() < -100) {
$myInput.val(-100);
}
if ($myInput.val() > 100) {
$myInput.val(100);
}
});
Related
I have an input field which is of number type, when I enter the dot I am not getting the value. So what I am trying to achieve is the I don't want the user to enter dot on the input field
function handleChange (value) {
console.log(value)
}
<input type="number" onchange="handleChange(this.value)"/>
on each number entering I am getting the value, but when I type dot (.), I am not getting how can I block this when user type it
<input name="num" type="number" min="1" step="1" onkeypress="return event.charCode >= 48 && event.charCode <= 57">
referance from this url
https://stackoverflow.com/a/44379790/4316212
Add This oninput="this.value = this.value.replace(/[^0-9]/, '')"
function handleChange (value) {
console.log(value)
}
<input type="number" onchange="handleChange(this.value)" oninput="this.value = this.value.replace(/[^0-9]/, '')"/>
if you want to block '.' you can use this way,
function handleChange (value) {
console.log(value)
}
var inputBox = document.getElementById("inputBox");
var invalidChars = [
".",
];
inputBox.addEventListener("keydown", function(e) {
if (invalidChars.includes(e.key)) {
e.preventDefault();
}
});
<input type="number" id="inputBox" onchange="handleChange(this.value)/>
It is generally not a good idea to use inline event handlers.
For more control you should check/use the atributes of a number input.
If you want to completely control the input, use a readonly field and handle it using your own handler. Here's a snippet using event delegation. It uses the step attribute from the number input field for adding/subtracting.
document.addEventListener('click', handle);
function handle(evt) {
if (evt.target.dataset.numinput) {
const inp = document.querySelector(`#num`)
inp.value = ( +inp.value + +(`${evt.target.dataset.numinput}${inp.step}`) )
.toFixed(2);
}
}
<input id="num" type="number" step="0.1" readonly/>
<button data-numinput="-"> - </button>
<button data-numinput="+"> + </button>
" <input type="number" min="1" max="100"> *
...
I did not know how to exclude 0, so I set the minimum value to 1, Please help)
you cannot exclude via html syntax, you'd need javascript for that. the min value=1 might be the only way via html only.
You can use jquery like that:
$('input').keypress(function(e){
if (this.value.length == 0 && e.which == 48 ){
return false;
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="number" min="1" max="100">
As I understood from you question you want to exclude zero, which means all other numbers (< 100) are accepted
try this code: it accepts the negative numbers + positive numbers > 0 and =< 100
const input = document.querySelector("input")
input.addEventListener('change', function(e) {
if ( e.target.value === "0" ) {
input.value = 1
}
})
<input type="number" max="100"/>
I have an input filed where the user can enter some numbers. I want to limit the user to enter only thousands.
.
on the image, the user can enter other numbers even if the step is 1000.
onblur is executed when you lose the focus, so try this :
function autoThousand(){
var input = document.getElementById('thousand');
if (input.value%1000 !== 0 ){
input.value-=input.value%1000;
}
}
<input type="number" id="thousand" onblur="autoThousand();" step="1000">
This will round all number inputs to multiples of their step value, when they lose focus. It uses traditional rounding, where it rounds 1499 down to 1000 and 1500 up to 2000. (You can remove the commented line of code to always round down.)
This is one of those "add it and forget it" bits of code, where you just need to add inputs of type number, with a limit, and it will automatically round them all for you.
document.querySelectorAll("input[type=number][limit]").forEach(function(input) {
input.addEventListener("change", function() {
var value = parseInt(this.value, 10);
var limit = parseInt(this.getAttribute("limit"), 10);
value = value + (limit / 2); // remove this to always round down
this.value = value - (value % limit);
});
});
<input type="number" limit="1000" />(multiples of 1000)<br />
<input type="number" limit="100" />(multiples of 100)<br />
<input type="number" limit="500" />(multiples of 500)<br />
use this,
if you still want to make the field number field set the type="number" , step="1000", min="1000" max="any value of your choice"
<input type="text" name="quantity" id="num" onchange="checkInput()">
<script>
function checkInput(){
get_num = new Number(document.getElementById('num').value)
if(get_num < 1000){
document.getElementById('num').value = ""
alert("You must enter number in thousands")
}
}
</script>
Set 'max', 'min' and 'step' value.
<input type="number" name="points" step="1000" max="100000" min="1000">
This is my HTML:
<input type="number" min="0" oninput="validity.valid||(value='');" step="0.1"/>
However, I can still type something like:
0000 or 000111 or 00223, etc.
in my input field. How can I limit it only to one 0?
Is there a way to do this in HTML only?
Thanks.
Check if your input starts with zero and override next digits with only 0.
function checkZero(){
var val = document.getElementById("num").value;
if(val.startsWith("0")){
document.getElementById("num").value = "0";
}
}
<input id="num" type="number" min="0" oninput="checkZero()" step="0.1"/>
I'd go with something like this:
while (s.charAt(0) == '0') {
if (s.length == 1) { break };
if (s.charAt(1) == '.') { break };
s = s.substr(1, s.length-1)
}
It accepts numbers like 0.1 and handles 00.1 or 001.
This question already has answers here:
How can I set max-length in an HTML5 "input type=number" element?
(31 answers)
Closed last year.
I have a text field.
<input type="number" min="0" max="999">
But i am able to type as many numbers inside the text box.
As I set max=999, I don't want that to happen.
Anyone knows the solution for this?
I have tried ng-maxlength and maxlength but doesn't work.
max attribue specifies the maximum possible value that we can specify.
for more details see this link
I think the following will be helpful to you,
//maxlength="10"
<input type="number" onKeyPress="if(this.value.length==10) return false;" />
Try This
var jimApp = angular.module("mainApp", []);
jimApp.controller('mainCtrl', function($scope){
var oldNumber = 0;
$scope.numberChanged = function(number){
if(number<=999){
oldNumber = number;
}
return oldNumber;
};
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="mainApp" ng-controller="mainCtrl">
<input type="number" min="0" max="999" ng-model="jimNum" ng-change="jimNum = numberChanged(jimNum);">
</div>
The solution that worked for me is to use onkeypress with the max attribute.
For e.g. for max length of 999
<input type="number" max="999" onkeypress="if (this.value.length > 2) return false;"/>
Tested in Chrome, Firefox and Edge.
Try
<input type="number" min="0" max="999"
onKeyUp="if(this.value>999){this.value='999';}else if(this.value<0){this.value='0';}"
id="yourid">
There is JSFiddle, using JQuery.
Your input
<input type="number" id="num">
The script :
$("#num").keypress( function(e) {
var current_val = $(this).val();
var typing_char = String.fromCharCode(e.which);
if (parseFloat(current_val + "" +typing_char) > 900) {
return false;
}
})
if you are limit the single field
<TextField type="number"
className="text-field-amount"
onInput={(e)=>{
e.target.value = Math.max(0, parseInt(e.target.value) ).toString().slice(0,2)
}}
min={0}
if you are mapping more then one number Text field through map then do like this
<TextField
key={key}
label={row.q_desc}
type="number"
onChange={this.onChange}
onInput={this.onInput}
/>
onInput= event => {
event.preventDefault();
debugger;
var textField_name = this.state.input_Name;
if (textField_name == "Zip") {
event.target.value = Math.max(0, parseInt(event.target.value))
.toString()
.slice(0, 4);
}
if (textField_name == "Social Security") {
event.target.value = Math.max(0, parseInt(event.target.value))
.toString()
.slice(0, 9);
}
if (textField_name == "Phone") {
event.target.value = Math.max(0, parseInt(event.target.value))
.toString()
.slice(0, 10);
}
};
onChange(e) {
debugger;
this.setState({
input_Name: e.target.name
});
}