HTML5-Eingabetyp Datum, Farbe, Bereich werden von Firefox und Internet Explorer unterstützt

Question

Ich habe alle meine Website mit vielen Formularen unter Verwendung von HTML5 erstellt (mit den input-Typen date, color und range.)

Alles funktioniert einwandfrei in Google Chrome.

Aber wenn ich Internet Explorer und Firefox einschalte, werden alle Eingabefelder wie der input-Typ text.

Gibt es einen Weg oder ein Skript, das ich herunterladen kann, um die korrekte Anzeige dieses Eingabefelds zu erzwingen?

Answer 1

Da HTML5 noch nicht vollständig standardisiert ist, unterstützen nicht alle Browser diese Eingabetypen. Das beabsichtigte Verhalten ist es, auf zurückzugreifen.

Hier finden Sie weitere Informationen zur Browserunterstützung für HTML5-Eingabetypen.

Sie können mit der Modernizr-Bibliothek oder mit etwas benutzerdefiniertem JavaScript die Unterstützung testen. Wenn Sie feststellen, dass ein bestimmtes HTML5-Feature nicht verfügbar ist, können Sie auf JavaScript-basierte Alternativen zurückgreifen.

Answer 2

Alle Browser greifen auf den Eingabetyp "Text" zurück, wenn spezielle Eingaben fehlen. Es geht alles um Widgets und Validierung.

Folgende unterstützen den Bereichs-Widget

Firefox Desktop 23

Opera Desktop

Chrome Desktop

Chrome Mobile

IOS Safari 5

.

.

.

Folgende Browser unterstützen jetzt das Farb-Widget

Firefox Desktop 29

Opera Desktop 11

Chrome Desktop 20:

Android 4.4 / Chrome Mobile :

Opera Mobile:

Blackberry:

Firefox OS 1.3

Firefox OS unterstützt jetzt die Farbeingabe, aber ich habe immer noch keinen Screenshot.

Wenn du möchtest, kannst du dieses http://www.eyecon.ro/colorpicker/ verwenden

Answer 3

Ich hatte ein ähnliches Problem mit input type=range. Alles funktionierte in allen Browsern, außer im Internet Explorer 10. Es lag nicht am Internet Explorer, da ich den Schieberegler auf anderen Websites sehen konnte. Die Lösung bestand darin, die Kompatibilitätsansicht von i.e. für meine Website auszuschalten.

Answer 4

Die beste Lösung, die ich denke, ist die Verwendung von jQuery-Plugins.

  jQuery UI Slider - Standardfunktionalität

  $(function() {
    $( "#slider" ).slider();
  });

http://jqueryui.com/slider/