html5 フォームに関するすべての話題にもかかわらず、ほとんどのシナリオで、この方法を使用することで余分な作業が発生しているように思えます。
たとえば、datepicker フィールドを考えてみましょう。これのネイティブ html5 実装は、ブラウザーごとに異なる方法でレンダリングされます。さらに、この機能をサポートしていないブラウザーの場合、ポリフィルされたソリューション (jquery UI など) も異なる方法でレンダリングされます。
これで、jquery を使用して完全に機能する統合ソリューションが得られたときに、同じフォームのカスタマイズとメンテナンスの複数のポイントを導入しました!
この分野での実際の経験について聞きたいです。話題のすべてに悩まされているからです!
まず第一に、私はwebshims lib (ポリフィルの 1 つで、もうメンテナンスされていません) の作成者です。あなたの質問に答えるには：
いいえ、1 つのプロジェクトだけでこれを行うのは非常に困難です。単純に、最新のテクノロジーを使用したいという理由だけで、そうしました。
そのとおり！その理由は次のとおりです。
Webshim を含めてスクリプトを作成した後、次のようにします。
//polyfill forms (constraint validation) and forms-ext (date, range etc.)
$.webshims.polyfill('forms forms-ext');
ウィジェットと制約をフォームに簡単に書き込むことができます。
<input type="date" />
<input type="date" min="2012-10-11" max="2111-01-01" />
<input type="range" disabled />
<input type="email" required placeholder="Yo you can use a placeholder" />
これにより、3 つの異なるウィジェットが作成され、それぞれが異なる構成になっています。追加の JS は必要ありません。標準化されたクリーンで無駄のないコードだけです。
DOM API についても同様です。以下に 2 つの例を示します: 2 つの日付フィールドの結合と、範囲フィールドと日付フィールドの結合。
古いブラウザでは正常に機能しなくなり、最新のブラウザでは問題なく動作します。
特にモバイルに適しています (たとえば、iOS 5、Blackberry は日付をサポートしています)。
モバイル UX の向上 (タッチ操作の入力 UI の向上、パフォーマンスの向上、システムへの適合) (使用している場合): type="email"、type="number"、type="date"/type="range"
私はより大きなエージェンシーの開発者であり、ほとんどのクライアントとあなたの意見は完全に一致しており、ほとんどのデザイナーは大きな違いを容認しませんが、それでも私は最新のテクノロジーを使用したいと考えています。
ポリフィル部分
//polyfill constraint validation
$.webshims.polyfill('forms');
エラー バブルの UI をカスタマイズする:
//on DOM-ready
$(function(){
$('form').bind('firstinvalid', function(e){
//show the invalid alert for first invalid element
$.webshims.validityAlert.showFor( e.target );
//prevent browser from showing native validation message
return false;
});
});
次のマークアップを生成します。
<!-- the JS code above will generate the following custom styleable HTML markup for the validation alert -->
<span class="validity-alert-wrapper" role="alert">
<span class="validity-alert">
<span class="va-arrow"><span class="va-arrow-box"></span></span>
<span class="va-box">Error message of the current field</span>
</span>
</span>
無効/有効なフォーム フィールドのスタイルのカスタマイズ:
.form-ui-invalid {
border-color: red;
}
.form-ui-valid {
border-color: green;
}
有効性アラートのテキストのカスタマイズ:
<input required data-errormessage="Hey this is required!!!" />
そして今、ポイントは何ですか：
問題ない：
//configure webshims to use customizable widget UI in all browsers
$.webshims.setOptions('forms-ext', {
replaceUI: true
});
$.webshims.polyfill('forms forms-ext');
そしてここにも：
そして今、ここに最高のものがあります：
//configure webshims to use customizable widget UI in all non mobile browsers, but a customizable one in all desktop and all non-capable mobile browsers
$.webshims.setOptions('forms-ext', {
//oh, I know this is bad browser sniffing :-(
replaceUI: !(/mobile|ipad|iphone|fennec|android/i.test(navigator.userAgent))
});
$.webshims.polyfill('forms forms-ext');
アレクサンダーの webshims の回答をサポートするために、UX、UI、およびフロントエンドの観点から、HTML5 入力のクロスブラウザー動作についてかなりの調査を行いました。私の結論は、デバイスとブラウザー間で優先される動作を持つ唯一の方法は、webshim のようなポリフィルを使用することです。これの多くは、これらの機能を実装していないデスクトップ ブラウザーをサポートする方法がなければ、日付用のバレル ローラーや数字用のテンキーパッドなどのデバイスのネイティブ機能を利用できないことに関係しています。
さまざまなネイティブ実装と一般的なプラグインでの日付入力の動作の分析を次に示し
ます
:
以下は、実際の入力タイプが一般的なブラウザー間でネイティブに Webshim フォールバックを使用してどのように動作するかを分析したものです: Webshim フォールバックを使用した
HTML5 入力の UX 分析 - Google スプレッドシート
これらの入力を分析するために使用されるデモ ページは次のとおりです。
HTML5 入力ページのデモ - CodePen
まっすぐなjqueryUIを使用する代わりに、ポリフィルレイヤーを通過する価値があるのであれば、私も懐疑的でした。webshims libとHTML5を使用した後、JavaScriptコードがはるかに少ないことがすぐにわかりました。検証プラグインはもう必要ありません。この素晴らしいポリフィル、webshimslibを作成してサポートしてくれたAlexanderに感謝します。これは、フォームの送信クリックでajax呼び出しを行う例です。
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.9.1.js" type="text/javascript"></script>
<script src="http://code.jquery.com/ui/1.10.1/jquery-ui.js" type="text/javascript"></script>
<script>
// set options for html5shiv
if(!window.html5){
window.html5 = {};
}
window.html5.shivMethods = false;
</script>
<script src="webshims/js-webshim/minified/extras/modernizr-custom.js"></script>
<script src="webshims/js-webshim/minified/polyfiller.js"></script>
<script class="example">
$.webshims.setOptions({
//we do not use any DOM-/JS-APIs on DOM-ready, so we do not need to delay the ready event <- good against fouc
waitReady: false
});
//load all polyfill features
$.webshims.polyfill('forms forms-ext');
</script>
<script type="text/javascript">
$(function(){
var frm = $('#tstForm');
frm.submit(function () {
var someDate=$('#someDate').val();
alert('someDate:'+someDate);
// you can make your ajax call here.
return false;
});
});
</script>
</head>
<body>
<form id="tstForm">
Some Date:<input id="someDate" name="someDate" type="date" min="2013-01-01" max="2013-06-01" ></input>
Full Name:<input id="fullName" name="fullName" type="text" required></input>
Age:<input id="age" name="age" type="number" required min="18" max="120"></input>
<input type="submit" value="Submit"/>
</form>
</body>
</html>