input
HTML5を使用した多くのフォームを使用して(タイプdate
、color
およびを使用して)すべてのWebサイトを構築しましたrange
。
GoogleChromeではすべて正常に動作します。
しかし、Internet ExplorerとFirefoxをオンにすると、すべての入力フィールドがinput
タイプのようになりtext
ます。
この入力を正しく表示させるためにダウンロードできる方法やスクリプトはありますか?
input
HTML5を使用した多くのフォームを使用して(タイプdate
、color
およびを使用して)すべてのWebサイトを構築しましたrange
。
GoogleChromeではすべて正常に動作します。
しかし、Internet ExplorerとFirefoxをオンにすると、すべての入力フィールドがinput
タイプのようになりtext
ます。
この入力を正しく表示させるためにダウンロードできる方法やスクリプトはありますか?
HTML5はまだ完全に標準化されていないため、すべてのブラウザがこれらの入力タイプをサポートしているわけではありません。意図された動作はにフォールバックすること<input type="text">
です。
↪HTML5入力タイプのブラウザサポートの詳細については、こちらを参照してください。
ModernizrライブラリまたはカスタムJavaScriptを使用してサポートをテストできます。特定のHTML5機能が利用できないことを検出した場合は、JavaScriptベース の代替手段にフォールバックできます。
特別な入力がない場合、すべてのブラウザは入力タイプのテキストにフォールバックします。そのすべてはウィジェットと検証に関するものです。
次のサポート範囲ウィジェット
Firefoxデスクトップ23
Operaデスクトップ
Chromeデスクトップ
Chrome Mobile
IOSサファリ5
。
。
。
以下のブラウザがカラーウィジェットをサポートするようになりました
Firefoxデスクトップ29
Operaデスクトップ11
Chromeデスクトップ20:
Android 4.4 / Chrome Mobile:
Opera mobile:
ブラックベリー:
Firefox os 1.3
Firefox OSはカラー入力をサポートするようになりましたが、まだスクリーンショットがありません
input type=rangeでも同様の問題が発生しました。Internet Explorer 10を除いて、すべてがすべてのブラウザーで機能していました。他のWebサイトでスライダーが表示されていたので、InternetExplorerでは問題ありませんでした。解決策は、私のWebサイトの互換表示をオフにすることでした。
私が思う最善の解決策は、jqueryプラグインを使用することです。
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery UI Slider - Default functionality</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />
<script>
$(function() {
$( "#slider" ).slider();
});
</script>
</head>
<body>
<div id="slider"></div>
</body>
</html>