6

こんにちは、インターネットの親切な人々。

HTML5 の入力フィールド検証 CSS は Firefox や Chrome で機能しますが、残念ながら IE8 では機能しません...そして、ターゲット ユーザーの多くは IE8 を使用することになります。

...はい: 私は Modernizr を使用しており、Initializr を使用してページ テンプレートと CSS を取得しました...なぜ IE8 で正しく動作しないのか少し混乱しています。

テスト ページへのリンクは次のとおりです: Test html5 page

入力フィールドは、適切に入力する前は赤く、次のような有効な口座番号を入力すると、単純に緑に変わります: 50011111111

HTML5 コードは次のとおりです。

<label for="account">Account Number: </label> 
<input id="account" name="inputAccount" 
  placeholder="input billing account number" 
  pattern="/(^500)|^\d{11}" 
  required
  autofocus
  type="text"/>

おそらくかなり簡単に修正できるものについての提案は大歓迎です!

4

4 に答える 4

13

IE は、HTML5 要素を認識していないため、HTML5 要素を無視します。Modernizr ドキュメントから

Modernizr は、JavaScript の小さなループを実行して、HTML5 のさまざまな要素 (および abbr) を Internet Explorer でのスタイリングに使用できるようにします。これは、突然 IE が Audio 要素または Video 要素をサポートするようになるという意味ではありません。div の代わりに section を使用して CSS でスタイルを設定できることを意味するだけです。

これは、Modernizr が IE に HTML5 の新しいタグを伝えて、CSS を使用できるようにするが、実際には何もさせないということです。また、Modernizr は要素のデフォルト スタイルを追加しないため、たとえば<section>タグを作成する HTML5 CSS リセットを使用することをお勧めします。display: block;

フォームの検証に関しては、Modernizr はブラウザーの機能のみを検出し、実際には何もしないことを説明したトピックは正しかったです。Modernizr の背後にあるプロセスは、組み込みの yepnope テスト機能を使用して、ユーザーのブラウザーが「x」(この場合はフォーム検証) を実行できるかどうかを確認し、条件付きで非同期にスクリプトまたはスタイルを読み込んで「ポリフィル」(丁寧な検証) することです。 「javascriptを使用してネイティブの動作を模倣する」という言い方です)。

あなたの場合、おそらく次のようModernizr.load()にテストするために使用したいと思うModernizr.input.requiredでしょうModernizr.input.autofocus

 //the modernizr conditional load function
 Modernizr.load({
     //specify the tests, refer to the Modernizr docs for object names
   test: Modernizr.input.required && Modernizr.input.placeholder,
     //specify what to do if the browser fails the test, can be a function
   nope: 'path/to/polyfill/script',
     //sometimes you need to run some JS to init that script
   complete: function(){ polyfillinitorwhatever(); }
 });

かなり簡素化された Modernizr.load が表示されます。彼らのドキュメントは蛇行していると思いますが、実際には非常に優れています。私が問題を抱えて Paul Irish にツイートするたびに、彼はドキュメントへのリンクを送り返してきました。詳しく調べてみると、実際に私の答えが見つかりました。

検証は、ブラウザー メーカーが標準として実装する最も複雑な HTML5 機能の 1 つです。シンプルさがとても気に入っていますが、ユーザーが Chrome または Opera を使用している場合を除いて、すべてのケースで jQuery.validate を使用し続けています。FF ネイティブの検証はまだ弱いです。今のところjQueryを使い続けることをお勧めします。

于 2012-02-21T13:41:03.693 に答える
3

最近、新しいプラグインjquery.h5formを見つけました。

これを使用すると、Opera のようなフォーム検証がすべてのブラウザー (IE8 を含む) で有効になります。

于 2012-06-13T06:53:35.780 に答える
1

IE8 は、HTML5 要素があるとしても、すべてをサポートしているわけではありません。html5 を動作させるには、アドオンが必要です。1 つのアドオンはモダナイザーです

HTML5 でのスコア/互換性を含むブラウザーのリスト

于 2011-10-31T21:58:49.783 に答える
1

まだ欠けているのは、フィールド検証用の html5 ポリフィルだと思います。たとえば、http: //ericleads.com/h5validate/を使用できます。

その他のポリフィルは、https ://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills にあります。

于 2011-10-31T21:51:30.843 に答える