I would like to continue with numbers when using a placeholder in an input form.
Let's say my placeholder value is 5:
<input id="threshold" type="number" placeholder="5" value="">
I would like user to be able click on arrow up and value in a form would go to 6 (then 7, 8..). Instead, if user clicks on arrow up, values in the form would start on number 1 (then 2, 3...). Similar with arrow down - the value in the form would go to -1, instead of 4.
I can achieve desired behavior if I give up on placeholder and specify value, like this: <input id="threshold" type="number" value="5">
But let's say, I really want user to continue with numbers depending on placeholder value, because I like a gray look of input placeholder, is there an easy way to do this?
EDIT: A solution should also work with restrictions on min and max value of input number.
Here some example i dont know if that what u searching for
<p>input with min max from 10 to 100 with start value 10</p>
<input type="number" value="10" min="10" max="100">
<br>
<p>input with min from 10 with start value 10</p>
<input type="number" value="10" min="10" >
<br>
<p>input with max 100 with start value 10</p>
<input type="number" value="10" max="100">
In this demo I add two event listener to the #threshold element:
For the keyup event, to keep track of when the user typed the
value with the keyboard instead of using the arrow buttons, and
discard the automatic behaviour based on placeholder in that case.
For the input event, to catch whenever the user is sending input,
both with the arrow keys and the keyboard.If such event occurs when
the value is still empty, it will be overridden by a value that won't
start by 1/-1 but from the placeholder+1/-1. The handler will discard
the occurrence in case it happened pressing the keyboard instead of
the mouse.
As far as I know, there's no other way to discern the exact event occurred between inserting value with keyboard or by clicking the arrows so the only way I found was keeping track of the keypress happening one moment before the input itself and try my best to discard some rare occurrencies when those conditions where not sufficient.
It works but I'm not perfectly sure how it fits in accessibility terms.
But yet i can mention the scenarios in which I could test it as working:
When the input is still empty, clicking the arrow up/down will
increment and decrement starting from 5 as the zero (placeholder).
When the input is still empty, typing the numbers inside with the
keyboard won't trigger the override logic.
When the input is filled with a valid number, clicking the arrow
up/down will increment and decrement starting from the number
currently filling the field.
When the input is filled with a valid number, selecting the value and
pressing backspace or del (or delete the value by any means), will
reset the state of the control so that when pressing the arrows
up/down will follow the expected logic where the zero becomes the
placeholder again.
const o = document.querySelector('#threshold');
o.dataset.previous = '';
o.addEventListener('input', (event)=>{
//This shows the value of the input (as decided from browser)
//when the input event gets fired...
//Unfortunately when min attribute is set, and the value of the input is still blank,
//the value chosen by the browser (when pressing up/down arrows),
//is always equal to that min attribute value.
//Otherwise it was -1 or +1 based on pressing respectively the down or up arrow.
//So in that scenario there's no way to discrern if the arrow hit was up or down.
console.log(event.target.value);
//So far the problem remains impossible to solve with the current strategy
//because there's no specific event fired to understand that detail
//to say the whole story, placeholder was not intended to be used that way nor the arrow
//were supposed to be in control of the page... this was just a trick I did here.
//And unfortunately it wasn't powerful enough to cover the min/max scenario.
const el = event.target;
if (el.dataset.prevent === true || el.dataset.previous !== ''){
el.dataset.prevent = false;
return false;
}
if( el.getAttribute('min') !== null && el.value === el.getAttribute('min') )
el.value = parseInt(el.placeholder) - 1;
else if(el.value === '1')
el.value = parseInt(el.placeholder) + 1;
else if(el.value === '-1')
el.value = parseInt(el.placeholder) - 1;
el.dataset.previous = el.value;
});
o.addEventListener('keyup',(event)=>{
const el = event.target;
if(el.value !== '')
el.dataset.prevent = true;
else{
el.dataset.prevent = false;
el.dataset.previous = '';
}
})
<input id="threshold" type="number" placeholder="5" max="10">
<!--
Example of input (having the same id) with min attribute set
<input id="threshold" type="number" placeholder="5" max="10">
-->
Is there's any way to format an input[type='number'] value to always show 2 decimal places?
Example: I want to see 0.00 instead of 0.
Solved following the suggestions and adding a piece of jQuery to force the format on integers:
parseFloat($(this).val()).toFixed(2)
You can't really do this just with HTML, but you a halfway step might be:
<input type='number' step='0.01' value='0.00' placeholder='0.00' />
Using the step attribute will enable it. It not only determines how much it's supposed to cycle, but the allowable numbers, as well. Using step="0.01" should do the trick but this may depend on how the browser adheres to the standard.
<input type='number' step='0.01' value='5.00'>
The solutions which use input="number" step="0.01" work great for me in Chrome, however do not work in some browsers, specifically Frontmotion Firefox 35 in my case.. which I must support.
My solution was to jQuery with Igor Escobar's jQuery Mask plugin, as follows:
$(document).ready(function () {
$('.usd_input').mask('00000.00', { reverse: true });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.16/jquery.mask.min.js" integrity="sha512-pHVGpX7F/27yZ0ISY+VVjyULApbDlD0/X0rgGbTqCE7WFW5MezNTWG/dnhtbBuICzsd0WQPgpE4REBLv+UqChw==" crossorigin="anonymous"></script>
<input type="text" autocomplete="off" class="usd_input" name="dollar_amt">
This works well, of course one should check the submitted value afterward :) NOTE, if I did not have to do this for browser compatibility I would use the above answer by #Rich Bradshaw.
Based on this answer from #Guilherme Ferreira you can trigger the parseFloat method every time the field changes. Therefore the value always shows two decimal places, even if a user changes the value by manual typing a number.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$(".floatNumberField").change(function() {
$(this).val(parseFloat($(this).val()).toFixed(2));
});
});
</script>
<input type="number" class="floatNumberField" value="0.00" placeholder="0.00" step="0.01" />
If you landed here just wondering how to limit to 2 decimal places I have a native javascript solution:
Javascript:
function limitDecimalPlaces(e, count) {
if (e.target.value.indexOf('.') == -1) { return; }
if ((e.target.value.length - e.target.value.indexOf('.')) > count) {
e.target.value = parseFloat(e.target.value).toFixed(count);
}
}
HTML:
<input type="number" oninput="limitDecimalPlaces(event, 2)" />
Note that this cannot AFAIK, defend against this chrome bug with the number input.
This works to enforce a max of 2 decimal places without automatically rounding to 2 places if the user isn't finished typing.
function naturalRound(e) {
let dec = e.target.value.indexOf(".")
let tooLong = e.target.value.length > dec + 3
let invalidNum = isNaN(parseFloat(e.target.value))
if ((dec >= 0 && tooLong) || invalidNum) {
e.target.value = e.target.value.slice(0, -1)
}
}
I know this is an old question, but it seems to me that none of these answers seem to answer the question being asked so hopefully this will help someone in the future.
Yes you can always show 2 decimal places, but unfortunately it can't be done with the element attributes alone, you have to use JavaScript.
I should point out this isn't ideal for large numbers as it will always force the trailing zeros, so the user will have to move the cursor back instead of deleting characters to set a value greater than 9.99
//Use keyup to capture user input & mouse up to catch when user is changing the value with the arrows
$('.trailing-decimal-input').on('keyup mouseup', function (e) {
// on keyup check for backspace & delete, to allow user to clear the input as required
var key = e.keyCode || e.charCode;
if (key == 8 || key == 46) {
return false;
};
// get the current input value
let correctValue = $(this).val().toString();
//if there is no decimal places add trailing zeros
if (correctValue.indexOf('.') === -1) {
correctValue += '.00';
}
else {
//if there is only one number after the decimal add a trailing zero
if (correctValue.toString().split(".")[1].length === 1) {
correctValue += '0'
}
//if there is more than 2 decimal places round backdown to 2
if (correctValue.toString().split(".")[1].length > 2) {
correctValue = parseFloat($(this).val()).toFixed(2).toString();
}
}
//update the value of the input with our conditions
$(this).val(correctValue);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="my-number-input" class="form-control trailing-decimal-input" type="number" min="0.01" step="0.01" value="0.00" />
This is a quick formatter in JQuery using the .toFixed(2) function for two decimal places.
<input class="my_class_selector" type='number' value='33'/>
// if this first call is in $(document).ready() it will run
// after the page is loaded and format any of these inputs
$(".my_class_selector").each(format_2_dec);
function format_2_dec() {
var curr_val = parseFloat($(this).val());
$(this).val(curr_val.toFixed(2));
}
Cons: you have to call this every time the input number is changed to reformat it.
// listener for input being changed
$(".my_class_selector").change(function() {
// potential code wanted after a change
// now reformat it to two decimal places
$(".my_class_selector").each(format_2_dec);
});
Note: for some reason even if an input is of type 'number' the jQuery val() returns a string. Hence the parseFloat().
The top answer gave me the solution but I didn't like that the user input was changed immediately so I added delay which in my opinion contributes to a better user experience
var delayTimer;
function input(ele) {
clearTimeout(delayTimer);
delayTimer = setTimeout(function() {
ele.value = parseFloat(ele.value).toFixed(2).toString();
}, 800);
}
<input type='number' oninput='input(this)'>
https://jsfiddle.net/908rLhek/1/
My preferred approach, which uses data attributes to hold the state of the number:
const el = document.getElementById('amt');
// react to stepping in UI
el.addEventListener('onchange', ev => ev.target.dataset.val = ev.target.value * 100)
// react to keys
el.addEventListener('onkeyup', ev => {
// user cleared field
if (!ev.target.value) ev.target.dataset.val = ''
// non num input
if (isNaN(ev.key)) {
// deleting
if (ev.keyCode == 8)
ev.target.dataset.val = ev.target.dataset.val.slice(0, -1)
// num input
} else ev.target.dataset.val += ev.key
ev.target.value = parseFloat(ev.target.dataset.val) / 100
})
<input id="amt" type='number' step='0.01' />
ui-number-mask for angular, https://github.com/assisrafael/angular-input-masks
only this:
<input ui-number-mask ng-model="valores.irrf" />
If you put value one by one....
need: 120,01
digit per digit
= 0,01
= 0,12
= 1,20
= 12,00
= 120,01 final number.
Take a look at this:
<input type="number" step="0.01" />
This is the correct answer:
<input type="number" step="0.01" min="-9999999999.99" max="9999999999.99"/>
I have a textbox in a form, and I would like to set the maximum allowed number value to be 50. Is this possible with HTML? Thanks
Yes. Use maxlength attribute.
<input type="text" size="10" maxlength="50">
EDIT: I misunderstood your question. If you want it so that the max number is 50 and it accepts nothing else you should just check the value that is accepted in the input and if it is greater than 50, you can do something (clear the textbox, throw an error, apply an error class, etc). Maybe write a function to tell if it is a number and is <= 50?
function isValidNum(n) {
if (!isNaN(parseFloat(n)) && isFinite(n) && n<=50)
//do something
}
From HERE
I think you are looking for the maxlength attribute:
<input type="text" maxlength="10">
you could do it with javascript on the onblur event
function txtOnBlur(txt){
if (txt.value >50){
txt.value = "";
alert("No values over 50");
}
}
add add the onBlur="javascript:txtOnBlur(this);" attribute to your textbox.
If it's the char lenght, just add teh maxlenght attribute (maxlength="50").
As far as I understand, what you are looking for is more like this: Limit input box to 0-100
Crimson has submitted an answer that sounds exactly as the code you need. Edited and refined for your need, it will become:
<script>
function handleChange(input) {
if (input.value < 0) input.value = 0;
if (input.value > 50) input.value = 50;
}
</script>
And your textbox would look something like this:
<input type="text" onChange="handleChange(this)" />
You want this:
<input type="number" min="1" max="50" />
Thus 51 is too high. 50 is okay. This is a HTML5 attribute.
Maxlengh will allow 50 characters aka a number with 49 zeros after it. Which I don't think was what you mean.
Max will allow the input to have a value of no higher than specified.
You will still need to validate it server side how ever.
For <input type="number"> element, maxlength is not working. How can I restrict the maxlength for that number element?
And you can add a max attribute that will specify the highest possible number that you may insert
<input type="number" max="999" />
if you add both a max and a min value you can specify the range of allowed values:
<input type="number" min="1" max="999" />
The above will still not stop a user from manually entering a value outside of the specified range. Instead he will be displayed a popup telling him to enter a value within this range upon submitting the form as shown in this screenshot:
You can specify the min and max attributes, which will allow input only within a specific range.
<!-- equivalent to maxlength=4 -->
<input type="number" min="-9999" max="9999">
This only works for the spinner control buttons, however. Although the user may be able to type a number greater than the allowed max, the form will not submit.
Screenshot taken from Chrome 15
You can use the HTML5 oninput event in JavaScript to limit the number of characters:
myInput.oninput = function () {
if (this.value.length > 4) {
this.value = this.value.slice(0,4);
}
}
If you are looking for a Mobile Web solution in which you wish your user to see a number pad rather than a full text keyboard. Use type="tel". It will work with maxlength which saves you from creating extra javascript.
Max and Min will still allow the user to Type in numbers in excess of max and min, which is not optimal.
You can combine all of these like this:
<input name="myinput_drs"
oninput="maxLengthCheck(this)"
type = "number"
maxlength = "3"
min = "1"
max = "999" />
<script>
// This is an old version, for a more recent version look at
// https://jsfiddle.net/DRSDavidSoft/zb4ft1qq/2/
function maxLengthCheck(object)
{
if (object.value.length > object.maxLength)
object.value = object.value.slice(0, object.maxLength)
}
</script>
Update:
You might also want to prevent any non-numeric characters to be entered, because object.length would be an empty string for the number inputs, and therefore its length would be 0. Thus the maxLengthCheck function won't work.
Solution:
See this or this for examples.
Demo - See the full version of the code here:
http://jsfiddle.net/DRSDavidSoft/zb4ft1qq/1/
Update 2: Here's the update code:
https://jsfiddle.net/DRSDavidSoft/zb4ft1qq/2/
Update 3:
Please note that allowing more than a decimal point to be entered can mess up with the numeral value.
Or if your max value is for example 99 and minimum 0, you can add this to input element (your value will be rewrited by your max value etc.)
<input type="number" min="0" max="99"
onKeyUp="if(this.value>99){this.value='99';}else if(this.value<0){this.value='0';}"
id="yourid">
Then (if you want), you could check if is input really number
it's very simple, with some javascript you can simulate a maxlength, check it out:
//maxlength="2"
<input type="number" onKeyDown="if(this.value.length==2) return false;" />
You can specify it as text, but add pettern, that match numbers only:
<input type="text" pattern="\d*" maxlength="2">
It works perfect and also on mobile ( tested on iOS 8 and Android ) pops out the number keyboard.
Lets say you wanted the maximum allowed value to be 1000 - either typed or with the spinner.
You restrict the spinner values using:
type="number" min="0" max="1000"
and restrict what is typed by the keyboard with javascript:
onkeyup="if(parseInt(this.value)>1000){ this.value =1000; return false; }"
<input type="number" min="0" max="1000" onkeyup="if(parseInt(this.value)>1000){ this.value =1000; return false; }">
//For Angular I have attached following snippet.
<div ng-app="">
<form>
Enter number: <input type="number" ng-model="number" onKeyPress="if(this.value.length==7) return false;" min="0">
</form>
<h1>You entered: {{number}}</h1>
</div>
If you use "onkeypress" event then you will not get any user limitations as such while developing ( unit test it). And if you have requirement that do not allow user to enter after particular limit, take a look of this code and try once.
Another option is to just add a listener for anything with the maxlength attribute and add the slice value to that. Assuming the user doesn't want to use a function inside every event related to the input. Here's a code snippet. Ignore the CSS and HTML code, the JavaScript is what matters.
// Reusable Function to Enforce MaxLength
function enforce_maxlength(event) {
var t = event.target;
if (t.hasAttribute('maxlength')) {
t.value = t.value.slice(0, t.getAttribute('maxlength'));
}
}
// Global Listener for anything with an maxlength attribute.
// I put the listener on the body, put it on whatever.
document.body.addEventListener('input', enforce_maxlength);
label { margin: 10px; font-size: 16px; display: block }
input { margin: 0 10px 10px; padding: 5px; font-size: 24px; width: 100px }
span { margin: 0 10px 10px; display: block; font-size: 12px; color: #666 }
<label for="test_input">Text Input</label>
<input id="test_input" type="text" maxlength="5"/>
<span>set to 5 maxlength</span>
<br>
<label for="test_input">Number Input</label>
<input id="test_input" type="number" min="0" max="99" maxlength="2"/>
<span>set to 2 maxlength, min 0 and max 99</span>
Max length will not work with <input type="number" the best way i know is to use oninput event to limit the maxlength. Please see the below code for simple implementation.
<input name="somename"
oninput="javascript: if (this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength);"
type = "number"
maxlength = "6"
/>
Simple solution which will work on,
Input scroll events
Copy paste via keyboard
Copy paste via mouse
Input type etc cases
<input id="maxLengthCheck"
name="maxLengthCheck"
type="number"
step="1"
min="0"
oninput="this.value = this.value > 5 ? 5 : Math.abs(this.value)" />
See there is condition on this.value > 5, just update 5 with your max limit.
Explanation:
If our input number is more then our limit update input value this.value with proper number Math.abs(this.value)
Else just make it to your max limit which is again 5.
As stated by others, min/max is not the same as maxlength because people could still enter a float that would be larger than the maximum string length that you intended. To truly emulate the maxlength attribute, you can do something like this in a pinch (this is equivalent to maxlength="16"):
<input type="number" oninput="if(value.length>16)value=value.slice(0,16)">
I had this problem before and I solved it using a combination of html5 number type and jQuery.
<input maxlength="2" min="0" max="59" name="minutes" value="0" type="number"/>
script:
$("input[name='minutes']").on('keyup keypress blur change', function(e) {
//return false if not 0-9
if (e.which != 8 && e.which != 0 && (e.which < 48 || e.which > 57)) {
return false;
}else{
//limit length but allow backspace so that you can still delete the numbers.
if( $(this).val().length >= parseInt($(this).attr('maxlength')) && (e.which != 8 && e.which != 0)){
return false;
}
}
});
I don't know if the events are a bit overkill but it solved my problem.
JSfiddle
a simple way to set maxlength for number inputs is:
<input type="number" onkeypress="return this.value.length < 4;" oninput="if(this.value.length>=4) { this.value = this.value.slice(0,4); }" />
Maycow Moura's answer was a good start.
However, his solution means that when you enter the second digit all editing of the field stops. So you cannot change values or delete any characters.
The following code stops at 2, but allows editing to continue;
//MaxLength 2
onKeyDown="if(this.value.length==2) this.value = this.value.slice(0, - 1);"
HTML Input
<input class="minutesInput" type="number" min="10" max="120" value="" />
jQuery
$(".minutesInput").on('keyup keypress blur change', function(e) {
if($(this).val() > 120){
$(this).val('120');
return false;
}
});
Ugh. It's like someone gave up half way through implementing it and thought no one would notice.
For whatever reason, the answers above don't use the min and max attributes. This jQuery finishes it up:
$('input[type="number"]').on('input change keyup paste', function () {
if (this.min) this.value = Math.max(parseInt(this.min), parseInt(this.value) || 0);
if (this.max) this.value = Math.min(parseInt(this.max), parseInt(this.value) || 0);
});
It would probably also work as a named function "oninput" w/o jQuery if your one of those "jQuery-is-the-devil" types.
As with type="number", you specify a max instead of maxlength property, which is the maximum possible number possible. So with 4 digits, max should be 9999, 5 digits 99999 and so on.
Also if you want to make sure it is a positive number, you could set min="0", ensuring positive numbers.
<input type="number" maxlength="6" oninput="javascript: if (this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength);">
This worked for me with no issues
You can try this as well for numeric input with length restriction
<input type="tel" maxlength="3" />
<input type="number" onchange="this.value=Math.max(Math.min(this.value, 100), -100);" />
or if you want to be able enter nothing
<input type="number" onchange="this.value=this.value ? Math.max(Math.min(this.value,100),-100) : null" />
As I found out you cannot use any of onkeydown, onkeypress or onkeyup events for a complete solution including mobile browsers. By the way onkeypress is deprecated and not present anymore in chrome/opera for android (see: UI Events
W3C Working Draft, 04 August 2016).
I figured out a solution using the oninput event only.
You may have to do additional number checking as required such as negative/positive sign or decimal and thousand separators and the like but as a start the following should suffice:
function checkMaxLength(event) {
// Prepare to restore the previous value.
if (this.oldValue === undefined) {
this.oldValue = this.defaultValue;
}
if (this.value.length > this.maxLength) {
// Set back to the previous value.
this.value = oldVal;
}
else {
// Store the previous value.
this.oldValue = this.value;
// Make additional checks for +/- or ./, etc.
// Also consider to combine 'maxlength'
// with 'min' and 'max' to prevent wrong submits.
}
}
I would also recommend to combine maxlength with min and max to prevent wrong submits as stated above several times.
Since I was look to validate and only allow integers I took one the existing answers and improve it
The idea is to validate from 1 to 12, if the input is lower than 1 it will be set to 1, if the input is higher than 12 it will be set to 12. Decimal simbols are not allowed.
<input id="horaReserva" type="number" min="1" max="12" onkeypress="return isIntegerInput(event)" oninput="maxLengthCheck(this)">
function maxLengthCheck(object) {
if (object.value.trim() == "") {
}
else if (parseInt(object.value) > parseInt(object.max)) {
object.value = object.max ;
}
else if (parseInt(object.value) < parseInt(object.min)) {
object.value = object.min ;
}
}
function isIntegerInput (evt) {
var theEvent = evt || window.event;
var key = theEvent.keyCode || theEvent.which;
key = String.fromCharCode (key);
var regex = /[0-9]/;
if ( !regex.test(key) ) {
theEvent.returnValue = false;
if(theEvent.preventDefault) {
theEvent.preventDefault();
}
}
}
More relevant attributes to use would be min and max.
I know there's an answer already, but if you want your input to behave exactly like the maxlength attribute or as close as you can, use the following code:
(function($) {
methods = {
/*
* addMax will take the applied element and add a javascript behavior
* that will set the max length
*/
addMax: function() {
// set variables
var
maxlAttr = $(this).attr("maxlength"),
maxAttR = $(this).attr("max"),
x = 0,
max = "";
// If the element has maxlength apply the code.
if (typeof maxlAttr !== typeof undefined && maxlAttr !== false) {
// create a max equivelant
if (typeof maxlAttr !== typeof undefined && maxlAttr !== false){
while (x < maxlAttr) {
max += "9";
x++;
}
maxAttR = max;
}
// Permissible Keys that can be used while the input has reached maxlength
var keys = [
8, // backspace
9, // tab
13, // enter
46, // delete
37, 39, 38, 40 // arrow keys<^>v
]
// Apply changes to element
$(this)
.attr("max", maxAttR) //add existing max or new max
.keydown(function(event) {
// restrict key press on length reached unless key being used is in keys array or there is highlighted text
if ($(this).val().length == maxlAttr && $.inArray(event.which, keys) == -1 && methods.isTextSelected() == false) return false;
});;
}
},
/*
* isTextSelected returns true if there is a selection on the page.
* This is so that if the user selects text and then presses a number
* it will behave as normal by replacing the selection with the value
* of the key pressed.
*/
isTextSelected: function() {
// set text variable
text = "";
if (window.getSelection) {
text = window.getSelection().toString();
} else if (document.selection && document.selection.type != "Control") {
text = document.selection.createRange().text;
}
return (text.length > 0);
}
};
$.maxlengthNumber = function(){
// Get all number inputs that have maxlength
methods.addMax.call($("input[type=number]"));
}
})($)
// Apply it:
$.maxlengthNumber();
I use a simple solution for all inputs (with jQuery):
$(document).on('input', ':input[type="number"][maxlength]', function () {
if (this.value.length > this.maxLength) {
this.value = this.value.slice(0, this.maxLength);
}
});
The code select all input type="number" element where maxlength has defined.
If anyone is struggling with this in React the easiest solution that i found to this is using the onChange function like this:
const [amount, setAmount] = useState("");
return(
<input onChange={(e) => {
setAmount(e.target.value);
if (e.target.value.length > 4) {
setAmount(e.target.value.slice(0, 4));
}
}} value={amount}/>)
So what this basically does is it takes the value of the input and if the input value length is bigger than 4 it slices all the numbers after it so you only get the first 4 numbers (of course you can change the amount of numbers you can type by changing all 4's in the code). I hope this helps to anyone who is struggling with this issue. Also if you wanna learn what the slice method does you can check it out here
Non-optimal solutions
Rellying on min and max
As some people have pointed out, you can use max and min attributes to set the range of allowed values, but this won't prevent the user from typing longer text like maxlength attribute does.
keydown, keyup and other non-input event listeners
It is important to say that not all users work with a desktop keyboard so keydown or keyup events are not the best approch to accomplish this for all kind of input methods such as mobile keyboards
slice, substring and other String methods
This methods work well only if the user is typing at the end of the input, but if it is typing anywhere else, the character input won't be prevented. It will be added and the last character of the input will be removed instead
Solution for all situations
If you really want to prevent the character from being added to the input, when the desired length is reached (or any other condition is met), you can handle it using the beforeinput event listener which is supported for all major browsers: https://caniuse.com/?search=beforeinput.
It is called just before the input event listener which means the input value hasn't changed already, so you can store it an set to the input after.
const input = document.querySelector("input");
input.addEventListener("beforeinput", () => {
const valueBeforeInput = event.target.value;
event.target.addEventListener("input", () => {
if (event.target.value.length > 10) {
event.target.value = valueBeforeInput;
}
}, {once: true});
});
<input type=number />
If you want to support browsers before 2017 (2020 and 2021 for Edge and Firefox respectively) don't use the beforeinput event listener and use the code below instead.
const input = document.querySelector("input");
let valueBeforeInput = input.value;
input.addEventListener("input", () => {
if (event.target.value.length > 10) {
event.target.value = valueBeforeInput;
}
valueBeforeInput = event.target.value;
});
<input type=number />
This might help someone.
With a little of javascript you can search for all datetime-local inputs, search if the year the user is trying to input, greater that 100 years in the future:
$('input[type=datetime-local]').each(function( index ) {
$(this).change(function() {
var today = new Date();
var date = new Date(this.value);
var yearFuture = new Date();
yearFuture.setFullYear(yearFuture.getFullYear()+100);
if(date.getFullYear() > yearFuture.getFullYear()) {
this.value = today.getFullYear() + this.value.slice(4);
}
})
});