When I create an HTML <input type="number"/> with step="0.010000000000000009". I can only click the button to increase the value once to fill in the min value and then only once for the first increase by the step value, then it gets stuck at this value and further clicks have no effect. I can only reproduce this with min="1.2" max="1.3".
All other combinations of min, max and step I tried allow to click the button multiple times until it reaches max in the defined steps.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>input with decimal step</title>
</head>
<body>
<input type="number" min="1.2" max="1.3" step="0.010000000000000009"/>
</body>
</html>
I believe that, according to the HTML5 Living Specification, your <input /> element "suffers from step-mismatch":
https://html.spec.whatwg.org/multipage/input.html#the-step-attribute
https://html.spec.whatwg.org/multipage/input.html#concept-input-min-zero
Following the spec w.r.t. your case...
The step value is 0.010000000000000009 (from parseFloat).
The step-scale-factor value is always 1 for <input type="number" />
The step-base is the min attribute, which is 1.2.
The allowed-value-step is step * step-scale-factor which is 1 * 0.010000000000000009 === 0.010000000000000009.
Re: "Constraint validation", the spec says this:
Constraint validation: When the element has an allowed-value-step, and the result of applying the-algorithm-to-convert-a-string-to-a-number to the string given by the element's value="" is a number, and that number subtracted from the step-base is not an integral multiple of the allowed-value-step, the element is suffering from a step mismatch.
I'll rephrase that to this...:
If element has allowed-value-step and numeric value="" attribute.
(So this is only after the <input/> is non-empty, such as clicking the up/down buttons once to give it a value of 1.2)
...then subtract 1.2 (the step-base) from 1.2 (the value="") to give 0.
And 0 is not an integral multiple of 0.010000000000000009.
Therefore the element is suffering from a step mismatch.
Now, w.r.t. your findings:
I can only click the button to increase the value once to fill in the min value
Yes, that follows the HTML5 spec: the initial value="" is empty, so browsers will choose the next valid highest value which is the min="1.2" value.
and then only once for the first increase by the step value
Yes, that's because the next step is 1.2 + 0.010000000000000009 which is 1.210000000000000009 - which both browsers truncate the display to 1.21, however as soon as this happens we see a difference in browser behaviour:
Firefox seems to correctly comply with the spec and it sets HTMLInputElement.validity.stepMismatch to true and disables the up/down buttons due to the step-mismatch condition.
Chrome 92 does not and using the up/down buttons to set other values still results in HTMLInputElement.validity.stepMismatch === false.
Here's a snippet that shows validity information:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>input with decimal step</title>
</head>
<body>
<input id="inp" type="number" min="1.2" max="1.3" step="0.010000000000000009" />
<ul id="eventsList"></ul>
<script>
const inp = document.getElementById('inp');
const ul = document.getElementById('eventsList');
inp.addEventListener( 'input', logInfo );
inp.addEventListener( 'change', logInfo );
inp.addEventListener( 'click', logInfo );
function logInfo( e ) {
const li = document.createElement('li');
li.textContent = e.type + ". Value: " + inp.value + ", valid: " + inp.validity.valid + ", stepMismatch: " + inp.validity.stepMismatch;
ul.appendChild( li );
}
</script>
</body>
</html>
In Chrome, it lets me click the up button 10 times (1.2, 1.21, 1.22, 1.23, ..., 1.28, to 1.29) before it stops, though it never reports stepIsmatch: true.
In Firefox, it lets me click the up button 1 times (1.2 and 1.21) before it sets stepMismatch: true.
My money's on Chrome doing their own thing given their interpretation (or at least, their implementation) of the spec is more forgiving and is less likely to result in end-user-frustration when step is set to a strange value.
What's interesting is that the Number type in browsers seems able to accurately represent 0.010000000000000009 without any tell-tale IEEE 754 rounding (ditto Python), whereas C#/.NET's Single (32-bit) and Double (64-bit) floating-point types both choke and give me rather bad approximations.
Related
I want to display an input type hour from 08:00 to 20:00. I tried this:
<input type="time" id="timeAppointment" name = "timeAppointment" min="08:00" max="20:00" placeholder="hour" required/>
But when I display it I can still select any time, it does not restrict me as I indicate. What is the problem? If is necessary some code I work with Javascript.
The constraints within the input do not prevent from entering an incorrect value in this case. Here is an overview of what MDN says in their documentation:
By default, does not apply any validation to entered values, other than the user agent's interface generally not allowing you to enter anything other than a time value.
But you can write validations with JavaScript, or visual validations with CSS, like so:
.container{
display:flex;
align-items:center;
gap:1rem;
}
input:invalid+span:after {
content: '✖';
}
input:valid+span:after {
content: '✓';
}
<div class = "container">
<input type="time" id="timeAppointment" name = "timeAppointment" value="08:00" min="08:00" max="20:00" placeholder="hour" required/>
<span class="validity"></span>
</div>
Setting min and max properties in input tags do not inherently prevent you from accepting out of range values as inputs, but it controls the valid property of the tag, which can then be used such as in css to style your page accordingly. Some browsers do make it so that you cannot input out of the specified range, but it is not platform-independent behaviour.
See more here: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/time#setting_maximum_and_minimum_times
If you want to ensure that only the time between min and max are input, you could programmatically implement that using an onchange listener on your input element as follows:
Make sure to indicate to the user why their input is not changing (because it is not between min and max) using css and text, etc.
const timeInput = document.getElementById("timeAppointment");
timeInput.value = '15:56';
let previousValue = timeInput.value;
timeInput.onchange = () => {
console.log(previousValue)
console.log(timeInput.value)
if (timeInput.value < timeInput.min || timeInput.value > timeInput.max) {
timeInput.value = previousValue;
}
previousValue = timeInput.value;
}
<input type="time" id="timeAppointment" name="timeAppointment" min="08:00" max="20:00" required/>
However, there is a caveat to this. Imagine you are changing your time from 02:00PM to 11:00AM. You would go from left to right, and as soon as you change 02 hours to 11 hours, the javascript validation fails as it becomes 11:00PM and the value is not able to update.
Either you will have to write a convoluted way to get around all the edge cases, or the users will have to find a weird way to change their time. This is why this is generally a bad idea to validate on every input like this, and instead you can validate it when you submit the form, or onfocusout and let the user know by appropriate styling.
Is there anyway that I can add functionality to this arrow?
▼
I want it to be clickable and if clicked for it to increase a value of an input by one. So say there is the value of 5 in an input box, if the arrow was clicked, the value would show 6.
Is this possible to do or is there a better approach?
It sounds like you could be looking for the number input type. See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input for a list of input types. The code to make a number input is:
<input type="number">
In HTML
<input type="text" readonly id="textbox" />
<a id="increment" style="cursor:pointer;">▼</a>
In Jquery, add this
$("#increment").click(function(e) {
var old_val = +$("#textbox").val();
var increment = +'1'
var new_val = old_val + increment;
$("#textbox").val(new_val);
});
This will increment the text field value on the arrow click.
I am wondering if the form validation with Safari Browser (MAC OS and Version 7.0.4 (9537.76.4)) when using input type="number" is not working properly:
When visiting
http://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_input_max_min
with Safari Browser I expect that I would get a warning when I enter a letter or a number outside the specified range into the "Quantity" field. But nothing happens and the input is sent to the server...
When using Chrome I get a warning...
I also have checked the http://html5test.com site and it states that the input type number and the min and max attribute are supported. But why then is it not working?? What am I doing wrong or what am I not understanding?
Any help greatly appreciated...
Thanks
Tobi
Edited: As Frank Conijn mentions it is not really working with Safari. I now solved it with Javascript (Check all number input fields if they contain a number and if it is within the specified bounds):
$("input[type='number']").change(function(){
var maxValue = parseInt($(this).attr('max'));
var minValue = parseInt($(this).attr('min'));
var enteredValue = parseInt($(this).val());
if($.isNumeric(enteredValue)) {
var enteredValue = parseInt($(this).val());
if (enteredValue > maxValue) {
$(this).val(maxValue);
} else if (enteredValue < minValue) {
$(this).val(minValue);
}
} else {
$(this).val(minValue);
}
});
According to Can I Use dot com, form validation is currently poorly supported by Safari. By Safari on iOS not at all, even. And there is only partial support by Safari on non-tablets. See http://caniuse.com/form-validation.
if you still looking for the answer you can use input type="number".
min max ork if it set in that order:
1-name
2-maxlength
3-size
4-min
5-max
just copy it
<input name="X" maxlength="3" size="2" min="1" max="100" type="number" />
How set minimum and maximum values for <input type="time"> elements in HTML5.
I need this because I want to restrict users from inserting non working hours of a day. The minimum value should not be less than 7 AM and maximum value should not be greater than 6 PM.
Javascript is of course a better solution until there's more browser support.
<input type="time" min="07:00:00" max="18:00:00" />
should do the trick
https://www.w3.org/wiki/HTML/Elements/input/time
I suggest you rather to use javascript.
<script type="text/javascript">
function checktimeval(){
var timeval=*document.getElementById("theidofurinput").value*;
if(!(timeval > 1 && timeval < 12)){
document.getElementById("theidoferrorspan").innerHTML="Please enter time <7 a.m and >6 p.m";
}
}
Then call this function onblur of the input element.
I want a textbox to be in focus when my webpage loads. If you go to google.com you can see the textbox is already in focus. That's what I want.
Heres my form:
<form id="searchthis" action="#" style="display:inline;" method="get">
<input id="namanyay-search-box" name="q" size="40" x-webkit-speech/>
<input id="namanyay-search-btn" value="Search" type="submit"/>
Give your text input the autofocus attribute. It has fairly good browser-support, though not perfect. We can polyfill this functionality rather easily; I've taken the liberty to write up an example below. Simply place this at the bottom of your document (so that when it's ran, the elements already exist), and it will find your autofocus element (note: you should have only one, otherwise you could get inconsistent results), and draw focus upon it.
(function () {
// Proceed only if new inputs don't have the autofocus property
if ( document.createElement("input").autofocus === undefined ) {
// Get a reference to all forms, and an index variable
var forms = document.forms, fIndex = -1;
// Begin cycling over all forms in the document
formloop: while ( ++fIndex < forms.length ) {
// Get a reference to all elements in form, and an index variable
var elements = forms[ fIndex ].elements, eIndex = -1;
// Begin cycling over all elements in collection
while ( ++eIndex < elements.length ) {
// Check for the autofocus attribute
if ( elements[ eIndex ].attributes["autofocus"] ) {
// If found, trigger focus
elements[ eIndex ].focus();
// Break out of outer loop
break formloop;
}
}
}
}
}());
After some initial testing, this appears to provide support all the way back to Internet Explorer 6, Firefox 3, and more.
Test in your browser of choice: http://jsfiddle.net/jonathansampson/qZHxv/show
The HTML5 solution of Jonathan Sampson is probably the best. If you use jQuery, steo's sample should work, too. To be complete, here you go plain JS solution for all browsers and IE10+
window.addEventListener("load",function() {
document.getElementById("namanyay-search-box").focus();
});
$(document).ready(function(){
..code..
$('.textbox-class-name').focus();
..code..
});
Or you can try it on $(window).load()