Although I'm pretty sure this was working yesterday or the day before, <input type="number" min="0" max="50" step="10" value="0" />, for example, no longer works in IE10. I've tested my browser with http://ie.microsoft.com/testdrive/HTML5/Forms/Default.html and it's just not working anymore. Anyone else having this issue? Or, did it never work?
Internet Explorer 10 supports the number input. This is evident from a cursory examination of their documentation, as well as an attempt to use it within the browser itself. For example, attempting to place a letter in a number input will result in the value being cleared when the control loses focus.
You can also feature-detect support for number by programmatically doing the aforementioned test:
// Create the element
var element = document.createElement( "input" );
// Give it the number property and invalid contents
element.type = "number";
element.value = "qwerty";
// Value should be empty
alert( element.value ? "Not Supported" : "Supported" );
Run this test: http://jsfiddle.net/VAZwT/
It may very well be that you're equating progressively-enhanced UI (the spinners) with support for the control itself. I've seen this confuse a few people already. Some browsers augment supplement the number input with additional controls, but this is not (to my knowledge) a requirement for support.
A few simple tests for min, max, and step on jsfiddle: http://jsfiddle.net/sDVK4/show/
Please prefer the answer below from Sampson as it's more appropriate
IE doesn't have support for input type="number" but you can use a polyfill to make it work.
Here is the solution : http://html5please.com/#number
IE10 does not have Number support. Source: Can I use ... yet?
Just verified on our Windows 8 test machine, there is no number spinner on their test drive site in IE10.
Microsoft has validation bugs/errors still with input type=number, this is in IE11 as well.
https://connect.microsoft.com/IE/feedback/details/850187/html5-constraint-validation-is-broken-in-ie11-for-input-type-number
Just as I was starting to like Internet Explorer again... Hopefully they can fix this in IE12, fingers crossed
Here's the solution I developed, it works pretty well I think, hope it helps someone 😁
function handleKeyPress(e) {
let newValue = e.target.value + e.key;
if (
// It is not a number nor a control key?
isNaN(newValue) &&
e.which != 8 && // backspace
e.which != 17 && // ctrl
newValue[0] != '-' || // minus
// It is not a negative value?
newValue[0] == '-' &&
isNaN(newValue.slice(1)))
e.preventDefault(); // Then don't write it!
}
Insert a number:
<input onKeyPress="handleKeyPress(event)"/>
IE doesn't have support for input type="number" but you can use jQueryUI Spinner widget. It is very simple to use and it has many API's that friendly for developers.
Demo of jQuery-UI Spinner:
https://jqueryui.com/spinner/
API of jQuery-UI Spinner
https://api.jqueryui.com/spinner/#event-change
Related
Is there any way to disable autocomplete on a text field in chrome 66?
I have tried a number of options like :
autocomplete="off"
autocomplete="false"
autocomplete="disabled"
autocomplete="something-new"
etc.
Can anyone help me with this?
Also, one more thing does chrome automatically enables autocomplete for a username if it has a password type field below it?
I used this code and it is working for me. I hope it will also helpful for you. :)
Enter your type with readonly and then below mention code.
<input readonly type="email" onfocus="if (this.hasAttribute('readonly')) {
this.removeAttribute('readonly');
this.blur(); this.focus(); }" />
A lot of browsers refuse to adhere to what you have mentioned - the best way is to make an element readonly and then on hover/click/blur/focus, remove readonly.
So you could give it a class such as disable_autocomplete and also make the input field readonly.
Then when the field is hovered, focussed, or clicked you can remove readonly. Optionally, add it back when unfocussed.
$(document).ready(function(){
$("input").val("");
});
So, Chrome just sets the value of element when autofilling them. Just try that, else you can try set some interval, wich will check value in HTML code, because Chrome not put new value to HTML code, just puts it in memory for itself.
I acheived the auto complete functionality to be disabled in chrome by giving
<form autocomplete="off">
and
var isChrome = /Chrome/.test(navigator.userAgent) && /Google Inc/.test(navigator.vendor);
element.autocomplete = isChrome ? 'disabled' : 'off';
where isGoogleChrome is a function to find whether the browser is chrome written with help of this post.
JavaScript: How to find out if the user browser is Chrome?
I found something :
<input autocomplete="off" onfocus="this.setAttribute('autocomplete', 'I don\' t want this Google');" />
Good Day Everybody
function annihilateChromesAutocomplete(){
var clearAutocompleteInterval = setInterval(function(){
var peskyAutocompletedInputs = document.querySelectorAll("input:-internal-autofill-selected");
for(var i = (peskyAutocompletedInputs.length - 1); i > -1; i--){
peskyAutocompletedInputs[i].value = peskyAutocompletedInputs[i].defaultValue;
}
}, 1);
setTimeout(function(){
clearInterval(clearAutocompleteInterval);
}, 2000);
}
Use this
$(document).ready(function(){
$("input").attr("autocomplete", "off");
});
And if the autofill is enabled in chrome you can follow these steps to turn it off:
Turning Off Autofill in Chrome
Click the Chrome menu icon. (Three lines at the top right of your screen.)
Click on Settings.
At the bottom of the page, click “Show Advanced Settings”
In the Passwords and Forms section, uncheck “Enable Autofill to fill
out web forms in a single click”
Check out the newest version of Chrome V.67. They have fixed that issue.
Ok so I don't know the first thing about knockout.js and that may be my issue.
I am maintaining an ASP.NET application and I was tasked with changing an html
file in the solution that uses knockout.js. Here is the line of code that is having an issue:
<input type="number" class="form-control" data-bind="value: Quantity, uniqueId: Quantity, uniqueMod: 'measure-quantity', enable: IsNotListMeasureIndividually() && !IsNotInstalled()" />
This input tag is allowing the user to enter a negative number and we dont want to allow that. So what I tried was to add min="1" to the tag. The result was it got ignored then moved on to the next set of lines of code
then blew up.
Is the reason that the min is not working because this is not just a simple input tag and includes knockout references in the data-bind?
If so, how can I go about putting in the desired validation to
only accept positive numbers? Please help and remember I know nothing about knockout. Thank you!!
Try Something like this. Use javascript to ignore the keypress of the negative symbol. I don't think that all browsers support the number type Of course you will need the correct handle to assign the keydown event to the right input box.
document.getElementByTagName('input')[0].addEventListener('keydown',function(e){
if ( event.which == 109 || event.which == 173 ) {
event.preventDefault();
}
});
jsfiddle
This combined with the min="0" attribute will prevent the number block from allowing negative numbers.
I've looked through a number of posts all pointing towards different ways of using the autocomplete property, but I have yet to have this work in all my browsers. I've seen some really ugly workarounds such as this, but I'm looking for something that is clean and easy.
What is a good way to disable text field autofill on all (or at least, most) common browsers?
The following code will disable autocomplete in FF, IE, and Chrome.
<script>
$(document).ready(function () {
// IE & FF
$('input').attr('autocomplete', 'off');
// Chrome
if ( $.browser.webkit ) {
$('input').attr('autocomplete', 'new-password');
}});
</script>
Enabling Autocomplete on both form and input fields (with the "off" value) for the sake of those law-abiding browsers that do play by the rules is always a good beginning - also for the unlikely event that one day "other" browser...s may feel like compliance isn't all bad.
Until that day hacks are needed. I've noticed that Chrome looks for matching data in at least three places: Labels (contexts), Names and Placeholders. If the Name field is missing from input fields it will look in both Labels and placeholders, but if the Name field is present it will only look in Name and Placeholder.
This script utilize the "form-control" class from Bootstrap on input fields that must be guarded from Autocomplete. Use any other class or filter you like. Also assuming that Placeholders are in use - just remove that part if not.
$(document).ready(function() {
// Begin
var this_obj = null, this_placeholder = null, this_name = null;
$(".form-control").focus(function() {
this_obj = this;
this_name = $(this).prop("name");
this_placeholder = $(this).attr("placeholder");
$(this).prop("name", "NaN" + Math.random());
$(this).attr("placeholder", "...");
}).blur(function() {
$(this_obj).prop("name", this_name);
$(This_obj).attr("placeholder", this_placeholder);
});
// End
});
Note: Leaving the Placeholder empty might actually inadvertently trigger the Autocomplete function as empty assignments are apparently ignored.
The two variables this_name and this_placeholder may be avoided as they are accessible through this_obj, but I like to keep them around for the sake of readability and clarity.
The Script is erm.. quite unobtrusive, as it cleans up after itself and it only requires one matching class or attribute.
It works in Version 68.0.3440.106 (Officiel version) (64-bit), IE11 11.228.17134.0 and Firefox 61.0.2 (64-bit). Sorry, haven't tested others.
Add a class to all your input tags, suppose no-complete
And in your js file add following code:
setTimeout(function (){
$('.no-complete').val ("");
},1);
I'm writing an alarm web app. I have two number inputs, one for the hours, one for the minutes. Thus, when I use my keyboard arrows, they go from 0 to 23/59. Is there an HTML native way to make them go from 00 (01,02, et.) to 23/59 instead ?
I'm only worried about the UI aspects as my JS manages the missing 0 anyway.
EDIT - As requested :
What I have :
What I want :
Instead of going from 0,1,2 to 59, I'd like to automatically have a leading 0 when the number is smaller than 10 (00,01,02 to 59).
I use this to just prepend zeros as needed:
<script>
function leadingZeros(input) {
if(!isNaN(input.value) && input.value.length === 1) {
input.value = '0' + input.value;
}
}
</script>
And I just call that on the input's various events how ever works best for me, for instance:
<input type="number"
value="00"
onchange="leadingZeros(this)"
onkeyup="leadingZeros(this)"
onclick="leadingZeros(this)" />
It's not an ideal solution, mainly because there's a slight visual change as the user changes the number and the zero is prepended, but it works for me :)
Edit: Forgot to mention, I appreciate the answer asked for a native solution without javascript, but I wanted to provide something for people landing here through a Google search.
I'm afraid there is not native HTML way to do that unless using a Select tag. If you are using a text input you have to add the leading 0 on the 10 first values by javascript.
The correct, modern solution to OP's problem would be to use a input with type=time and then they don't have to worry about leading zeros or any of this other stuffs.
Adding on to some of the other answers that suggest using an event listener. I've tested this with jquery in chrome and it seems to work well with the padding without the slight flashing side effect.
<input type="number" id="input-element-id" value="00">
<script>
$('#input-element-id').on('input', function() {
const value = $(this).prop('value')
$(this).prop('value', value.padStart(2, '0'))
})
</script>
Although I'm pretty sure this was working yesterday or the day before, <input type="number" min="0" max="50" step="10" value="0" />, for example, no longer works in IE10. I've tested my browser with http://ie.microsoft.com/testdrive/HTML5/Forms/Default.html and it's just not working anymore. Anyone else having this issue? Or, did it never work?
Internet Explorer 10 supports the number input. This is evident from a cursory examination of their documentation, as well as an attempt to use it within the browser itself. For example, attempting to place a letter in a number input will result in the value being cleared when the control loses focus.
You can also feature-detect support for number by programmatically doing the aforementioned test:
// Create the element
var element = document.createElement( "input" );
// Give it the number property and invalid contents
element.type = "number";
element.value = "qwerty";
// Value should be empty
alert( element.value ? "Not Supported" : "Supported" );
Run this test: http://jsfiddle.net/VAZwT/
It may very well be that you're equating progressively-enhanced UI (the spinners) with support for the control itself. I've seen this confuse a few people already. Some browsers augment supplement the number input with additional controls, but this is not (to my knowledge) a requirement for support.
A few simple tests for min, max, and step on jsfiddle: http://jsfiddle.net/sDVK4/show/
Please prefer the answer below from Sampson as it's more appropriate
IE doesn't have support for input type="number" but you can use a polyfill to make it work.
Here is the solution : http://html5please.com/#number
IE10 does not have Number support. Source: Can I use ... yet?
Just verified on our Windows 8 test machine, there is no number spinner on their test drive site in IE10.
Microsoft has validation bugs/errors still with input type=number, this is in IE11 as well.
https://connect.microsoft.com/IE/feedback/details/850187/html5-constraint-validation-is-broken-in-ie11-for-input-type-number
Just as I was starting to like Internet Explorer again... Hopefully they can fix this in IE12, fingers crossed
Here's the solution I developed, it works pretty well I think, hope it helps someone 😁
function handleKeyPress(e) {
let newValue = e.target.value + e.key;
if (
// It is not a number nor a control key?
isNaN(newValue) &&
e.which != 8 && // backspace
e.which != 17 && // ctrl
newValue[0] != '-' || // minus
// It is not a negative value?
newValue[0] == '-' &&
isNaN(newValue.slice(1)))
e.preventDefault(); // Then don't write it!
}
Insert a number:
<input onKeyPress="handleKeyPress(event)"/>
IE doesn't have support for input type="number" but you can use jQueryUI Spinner widget. It is very simple to use and it has many API's that friendly for developers.
Demo of jQuery-UI Spinner:
https://jqueryui.com/spinner/
API of jQuery-UI Spinner
https://api.jqueryui.com/spinner/#event-change