Rectangle 27 3

According to Can I Use the date-time input types are not supported by IE. A good alternative would be jQuery UI.

javascript - HTML5 input types not working in IE10 - Stack Overflow

javascript jquery html5 internet-explorer input
Rectangle 27 2

The problem is evident from the start:

i = document.createElement("input");
i.setAttribute("type", "number");
if (i.type === "text")

The result of i.type in Internet Explorer 10 is "number," meaning Internet Explorer 10 actually supports the number input type this is further confirmed by consulting their documentation. You can even confirm that the functionality is in place by trying to put letters into a number input they'll be removed when the element loses focus.

If you want this tool to progressively enhance the interface for this control in Internet Explorer, you will need to make make the condition resolve to true.

@brushleaf The spinners are an enhancement that some browsers add to the control, but they're not a required UI for the control itself. The number control is defined by its behavior, rather than its presentation.

Ok, the condition should be changed. But what is a good one for IE ?

internet explorer 10 - HTML5 Input type=Number Polyfill not working in...

html5 internet-explorer-10 polyfills
Rectangle 27 2

input type number is not fully supported in IE10(not supported in IE9 and below) as it it supported in FF or Chrome.

html - Why does HTML5 input of type number not work or works sporadica...

html html5 internet-explorer input internet-explorer-10
Rectangle 27 2

input type number is not fully supported in IE10(not supported in IE9 and below) as it it supported in FF or Chrome.

html - Why does HTML5 input of type number not work or works sporadica...

html html5 internet-explorer input internet-explorer-10
Rectangle 27 1

Date inputs are not supported by majority browsers.

Since you already use Bootstrap in your project I would recommend to use bootstrap-datepicker javascript plugin.

javascript - HTML5 input types not working in IE10 - Stack Overflow

javascript jquery html5 internet-explorer input
Rectangle 27 1

Perhaps Internet Explorer and Firefox do not support it .Check the link here!

For the last link check Browser compatibility at the end of the page

javascript - HTML5 input types not working in IE10 - Stack Overflow

javascript jquery html5 internet-explorer input
Rectangle 27 28

<input class="required" id="field" type="text" maxlength="3" pattern="([0-9]|[0-9]|[0-9])" name="cvv"/>

and then in JavaScript I prevented the letters:

$("#myField").keyup(function() {
    $("#myField").val(this.value.match(/[0-9]*/));
});

I think you can use [0-9]{3} instead of [0-9][0-9][0-9] in your pattern (I know it works in Chrome at least).

This is nice in iOS but on android the keyboard still shows up as text, not numbers.

inputmode=numeric

the spec is idiotic, the fact that we need to change from type="number" to type="text" with pattern and javascript is ridiculous

Remove the pattern attribute if you are going to use the javascript code.

html5 - why is not working in Safa...

html5 safari maxlength
Rectangle 27 28

<input class="required" id="field" type="text" maxlength="3" pattern="([0-9]|[0-9]|[0-9])" name="cvv"/>

and then in JavaScript I prevented the letters:

$("#myField").keyup(function() {
    $("#myField").val(this.value.match(/[0-9]*/));
});

I think you can use [0-9]{3} instead of [0-9][0-9][0-9] in your pattern (I know it works in Chrome at least).

This is nice in iOS but on android the keyboard still shows up as text, not numbers.

inputmode=numeric

the spec is idiotic, the fact that we need to change from type="number" to type="text" with pattern and javascript is ridiculous

Remove the pattern attribute if you are going to use the javascript code.

html5 - why is not working in Safa...

html5 safari maxlength
Rectangle 27 7

You may try to user type="text" and oninput as below. This will let the numbers only.

<input type="text" maxlength="3" oninput="this.value=this.value.replace(/[^0-9]/g,'');" id="myId"/>

html5 - why is not working in Safa...

html5 safari maxlength
Rectangle 27 7

You may try to user type="text" and oninput as below. This will let the numbers only.

<input type="text" maxlength="3" oninput="this.value=this.value.replace(/[^0-9]/g,'');" id="myId"/>

html5 - why is not working in Safa...

html5 safari maxlength
Rectangle 27 128

You can try webshims, which is available on cdn + only loads the polyfill, if it is needed.

<!-- cdn for modernizr, if you haven't included it already -->
<script src="http://cdn.jsdelivr.net/webshim/1.12.4/extras/modernizr-custom.js"></script>
<!-- polyfiller file to detect and load polyfills -->
<script src="http://cdn.jsdelivr.net/webshim/1.12.4/polyfiller.js"></script>
<script>
  webshims.setOptions('waitReady', false);
  webshims.setOptions('forms-ext', {types: 'date'});
  webshims.polyfill('forms forms-ext');
</script>

<input type="date" />

In case the default configuration does not satisfy, there are many ways to configure it. Here you find the datepicker configurator.

Note: While there might be new bugfix releases for webshim in the future. There won't be any major releases anymore. This includes support for jQuery 3.0 or any new features.

I get an "access is denied" error when I try to run this jsfiddle in IE 11, and the date picker doesn't work.

This does not work on IE10...i get the same error as mentioned by @Shavais ...to get it working upgrade the jquery version to 1.11 or above..try this link

fiddle demo doesn't work in IE11

Unfortunatelly, the webshims support to upcoming Jquery 3 won't be done, as informed on author's site. Being so, I would rely on good and old Jquery UI.

html5 - How to get HTML 5 input type="date" working in Firefox and/or ...

html5 forms jquery-ui internet-explorer firefox
Rectangle 27 22

<input type="date"/>

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).

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.

A great and simple way to handle older and non-supportive browsers! +1

Sorry this question is coming at this time, but how do you call this javascript function from your html code??

Pur that script in a common fragment imported in every page, you should have some...

javascript - HTML 5 input type=“date” not working in Firefox - Stack O...

javascript html html5 firefox feature-detection
Rectangle 27 129

You can try webshims, which is available on cdn + only loads the polyfill, if it is needed.

<!-- cdn for modernizr, if you haven't included it already -->
<script src="http://cdn.jsdelivr.net/webshim/1.12.4/extras/modernizr-custom.js"></script>
<!-- polyfiller file to detect and load polyfills -->
<script src="http://cdn.jsdelivr.net/webshim/1.12.4/polyfiller.js"></script>
<script>
  webshims.setOptions('waitReady', false);
  webshims.setOptions('forms-ext', {types: 'date'});
  webshims.polyfill('forms forms-ext');
</script>

<input type="date" />

In case the default configuration does not satisfy, there are many ways to configure it. Here you find the datepicker configurator.

Note: While there might be new bugfix releases for webshim in the future. There won't be any major releases anymore. This includes support for jQuery 3.0 or any new features.

I get an "access is denied" error when I try to run this jsfiddle in IE 11, and the date picker doesn't work.

This does not work on IE10...i get the same error as mentioned by @Shavais ...to get it working upgrade the jquery version to 1.11 or above..try this link

fiddle demo doesn't work in IE11

Unfortunatelly, the webshims support to upcoming Jquery 3 won't be done, as informed on author's site. Being so, I would rely on good and old Jquery UI.

html5 - How to get HTML 5 input type="date" working in Firefox and/or ...

html5 forms jquery-ui internet-explorer firefox
Rectangle 27 128

You can try webshims, which is available on cdn + only loads the polyfill, if it is needed.

<!-- cdn for modernizr, if you haven't included it already -->
<script src="http://cdn.jsdelivr.net/webshim/1.12.4/extras/modernizr-custom.js"></script>
<!-- polyfiller file to detect and load polyfills -->
<script src="http://cdn.jsdelivr.net/webshim/1.12.4/polyfiller.js"></script>
<script>
  webshims.setOptions('waitReady', false);
  webshims.setOptions('forms-ext', {types: 'date'});
  webshims.polyfill('forms forms-ext');
</script>

<input type="date" />

In case the default configuration does not satisfy, there are many ways to configure it. Here you find the datepicker configurator.

Note: While there might be new bugfix releases for webshim in the future. There won't be any major releases anymore. This includes support for jQuery 3.0 or any new features.

I get an "access is denied" error when I try to run this jsfiddle in IE 11, and the date picker doesn't work.

This does not work on IE10...i get the same error as mentioned by @Shavais ...to get it working upgrade the jquery version to 1.11 or above..try this link

fiddle demo doesn't work in IE11

Unfortunatelly, the webshims support to upcoming Jquery 3 won't be done, as informed on author's site. Being so, I would rely on good and old Jquery UI.

html5 - How to get HTML 5 input type="date" working in Firefox and/or ...

html5 forms jquery-ui internet-explorer firefox
Rectangle 27 4

Basically Max and Min properties are not supported in Safari browser yet. I can see no flaw in the syntax. Are u using the Safari version 1.3+? or below that? Because maxlength property is supported from safari 1.3+.

html5 - why is not working in Safa...

html5 safari maxlength
Rectangle 27 4

Basically Max and Min properties are not supported in Safari browser yet. I can see no flaw in the syntax. Are u using the Safari version 1.3+? or below that? Because maxlength property is supported from safari 1.3+.

html5 - why is not working in Safa...

html5 safari maxlength
Rectangle 27 7

You need to have step="any" as an attribute when working with type="number"

<form>
  <input step="any" type="number" name="width" maxlength="5" placeholder="Width" value="733.95591182365" />
</form>

I've marked your answer as correct because that would also work, but I solved the problem by rounding the width to an integer before echoing it.

Sign up for our newsletter and get our top new questions delivered to your inbox (see an example).

html - Why can't I enter 500 in a HTML5 number field? - Stack Overflow

html html5 forms validation input
Rectangle 27 20

Your test page isn't live anymore, so I can't check this, but I found that if looping is enabled for the tag (e.g., <video loop="loop">), the "ended" event wasn't firing in Chrome or IE (I didn't test in Firefox). Once I removed the loop attribute, the "ended" event fired in both browsers.

HTML (with loop attribute, which will prevent the 'ended' event form firing):

Remove the loop attribute if you want the 'ended' event to fire...

<video id="video" loop="loop">
    <source src="whatever.mp4" width="320" height="240" type="video/mp4" />
    Your browser does not support this HTML5 video tag.
</video>
//NOTE: This only fires if looping is disabled for the video!
$("#video").bind("ended", function() {
    alert('Video ended!');
});

^ Note that this is jQuery and not pure Javascript

javascript - html5 video "ended" event not working in chrome and IE - ...

javascript jquery html5-video
Rectangle 27 19

It is in Firefox since version 51 (January 26, 2017), but it is not activated by default (yet)

html5 - How to get HTML 5 input type="date" working in Firefox and/or ...

html5 forms jquery-ui internet-explorer firefox