I'm using loads of inputs with HTML5 types (such as 'date' or 'time') using the jQuery Tools library. Some browsers (like Opera) automatically recognize that and, for example, transform the <input type="time" /> into a time input.
However, I do not want that behavior (since Opera's time input does not include seconds). Is there any common HTML5 way of disabling such special behavior?
Thanks,
Remo
If you want a time element on Opera to display seconds, add the attribute step="1", you can get milliseconds by setting step="0.1" and step=60 will give you the default hh:mm again. This also works in Chrome (tested in 9.0.597.98 beta).
As most of the commenters on the original question already stated: No, there is no "common HTML5 way" to prevent this behavior.
Even if so, you shouldn't. You're effectivly asking Opera to ignore something you asked for in the first place: a special UI.
Related
I am trying to implement a cross browser consistent float input type in HTML5. Sofar i have this:
<input type="number" step="any" lang="en-150">
The problem is, all major browsers behave different regarding the input format (comma or period - 1.55 or 1,55).
Chrome seems to be the only browser, which works always, also without of a 'lang' attribute.
Firefox did not support period (like "1.5") at all, until i added lang="en-150". Now Firefox behaves also like Chrome.
But i have still problems with IE (v11). It works with periods, but not with comma. HTML5 validations do not work (i.e. step="0.1", you can still enter sth. like "1,111") + when the form is submitted, it submits just the main number ("1,99" submits "1").
How can i also handle commas on IE?
I have created an input time HTML element, with this line:
<input type="time" id="startTime" value="#DateTime.Now.ToString("HH:mm")" />
I am using C# Razor syntax, but it does not really matter.
I checked it in both Google Chrome and Mozilla Firefox and in both time is represented in 24 hour format. Later, when I shared the code with my colleagues, in their versions of Chrome the time is represented in 12-hour format with AM and PM. Is there a way to specify in my HTML code that time should be represented in one way in all browsers.
There is similar question here, but however it was asked 3 years ago and the accepted answer starts with:
This feature is still in draft. Each browser shows it differently.
so I am wondering if that issue has been resolved in the meantime. If not, any suggestions of good time components are welcome. The simplest way that comes to my mind is to use separate select tags, but I would prefer to use single component which wraps both hours and minutes.
Edit:
I realized the problem is with the local settings of the machine the browser runs on, and after changing the settings on my colleagues' laptops it works fine. I am wondering if there is a way to force all browsers to show time in same format, no matter of the machine's settings. I use those fields in several places, so I would preferably stick to them and not using different HTML components (because I don't want to make too many changes in my code). Another problem I noticed is that the input time field is not like a drop-down list in Mozilla (and in Chrome it is drop-down like).
Shortly, the question now would be: How can I use input time fields and force them to show time in same format in all browsers, no matter on the time settings of the machine they are running on.
Thank you!
It is not related to the browser, but to the system settings.
input type="time" displays the time depending on the regional settings that are defined on the system.
The same applies to dates.
How can I use input time fields and force them to show time in same
format in all browsers, no matter on the time settings
There are plenty of different solutions. The most used is a input type="text". There are also JQuery plugins that can handle that. A js library widly used is moment.js
I am using HTML5 <input type="date" />, which works fine in Chrome and I get the calendar popup to select the date.
But in firefox it acts like a text box and no calendar pops up.
After doing few research I see few solutions using webshims, modenizr, etc... but I do not want to use jQuery.
Is there an alternative for this? How can I make it work in Firefox ?
EDIT: from Firefox 57, <input type="date"/> is partially supported.
Firefox doesn't support HTML5's <input type="date"/> yet.
You have two options:
always use a Javascript datetime picker, or
check if the browser is supporting that tag, if yes use it, if no then fallback on a javascript datepicker (jQuery or some other one).
This is called Feature Detection, and Modernizr is the most popular library for this.
Using always a javascript datepicker is easier and faster but it won't work with javascript disabled (who cares), it will work very bad on mobile (this is important) and it will smell of old.
Using the hybrid approach instead will let you cover every case now, up to the day when every browser will support the HTML5 datepicker, in a standardized way and without needing javascript at all. It is future-proof, and this is especially important in mobile browsing, where the javascript datepickers are almost unusable.
This is a kick off example to do that on every <input type="date"/> element of every page automatically:
<script>
$(function(){
if (!Modernizr.inputtypes.date) {
// If not native HTML5 support, fallback to jQuery datePicker
$('input[type=date]').datepicker({
// Consistent format with the HTML5 picker
dateFormat : 'yy-mm-dd'
},
// Localization
$.datepicker.regional['it']
);
}
});
</script>
It uses jQuery because I use jQuery, but you are free to substitute the jQuery parts with vanilla javascript, and the datepicker part with a javascript datepicker of your choice.
It's now working. Since Firefox 53, you can activate it in about:config by enabling dom.forms.datetype option. See http://caniuse.com/#feat=input-datetime and https://developer.mozilla.org/en-US/Firefox/Experimental_features
`input type="date"` is not supported on mozilla
check the link for list of supported events
I use 6 HTML selectboxes, for the various items, with OPTION statements for the proper values:
year 2000-2050 (or whatever range you choose)
month 1-12 (you can have it show month names)
day 1-31
hour 0-23 (or use 12 midnight - 11 PM, this just changes the display)
minute 0-59
second 0-59 (or just assume 0)
No Javascript needed, although I do use some to avoid invalid selections (like February 30). This is triggered on change of month or year.
What version of firefox you are using.Firefox lower versions less than 30 will not support most of html5 features and html5 input type="date" is not supported on firefox.
For more details please refer:http://caniuse.com/#feat=input-datetime.
The firefox browser doesn't provide full support for html5 but most of the features are supported on versions above 30.
The more convenient was is to use the jquery or bootstrap datetimepicker for selecting date.It will be supported on all browser types.
In my web application I'm using an input type range element.
<div id="fontSlide">
<input type="range"
id="rangeBar"
min="0"
max="2"
value="0"
onchange="EM.adjustFontSize(this.value)"
title="Scrolla per cambiare la dimensione del testo">
</div>
Unluckily, it is not supported by Firefox and Internet Explorer before version 10.
I could create an alternative HTML for Internet Explorer using conditional comments, but how can I handle it with Firefox? Can I specify somehow at least a different CSS (hiding it could be OK)?
I prefer not to use Jquery.browser because I know it is deprecated, and also to import something like modernizer.js just for one check is too heavy. The best solution would be one single JavaScript check line, something really light.
CSS hacks are my last recourse. I used it and made it work weeks ago, but then I updated my Firefox version and now it is not working anymore. This made me realize that CSS hacks are too risky.
Use jQuery UI, more specifically Slider. It will save a lot of time.
I'm building a form using jQuery Mobile but if I use an input filed with the attribute type="number" the numbers entered get formatted using the thousands convention
example:
if I enter 1234567
the number will be converted in to 1,234,567
<input type="number" name="number" id="number" value="">
is there a way to avoid this?
thanks
Most browsers do not do that, but WebKit-based ones (like Chrome), does. Incorrectly, I might add, since I believe it is stated in the HTML5 specification that no such formatting should be done.
This is a major problem for me when it comes to HTML5 input items; that they are not customizable enough and almost unusable in any sort of production environment because of different client behavior. But this (I hope) will get changed as the specification becomes more mature, so that the developer can decide things instead of the browser.
Another example is how required works on some browsers, and how the error message is decided on.
The solution to your problems is to not use type="number", and instead go back to using type="text" and adding the attribute pattern with the regex value of "[0-9]*" which will make it show up as a number input at least on Apple phones. Not on Android, however, I think.
What you could do is check on the requests what kind of client it is, and use different methods depending on that. Like using type="text" pattern="[0-9]*" for iPhone and desktop computers, and type="number" for Android.