HTML5では要素placeholderに属性が導入されinput、グレー表示されたデフォルトのテキストを表示できるようになりました。
残念ながら、IE 9 を含む Internet Explorer ではサポートされていません。
すでにいくつかのプレースホルダー シミュレーター スクリプトが存在します。これらは通常、入力フィールドにデフォルトのテキストを配置し、それを灰色にして、入力フィールドにフォーカスするとすぐにそれを削除します。
この方法の欠点は、プレースホルダー テキストが入力フィールド内にあることです。つまり、
- スクリプトでは入力フィールドが空かどうかを簡単に確認できない
- プレースホルダーをデータベースに挿入しないようにするには、サーバー側の処理でデフォルト値をチェックする必要があります。
プレースホルダーテキストが入力自体に含まれないソリューションが欲しいです。
ベストアンサー1
「Webフォーム：入力プレースホルダー」セクションを見ると、HTML5 クロスブラウザポリフィル私が見たのはjQuery-html5-プレースホルダー。
私は試しましたデモIE9 では、<input>span で囲まれ、プレースホルダー テキストでラベルがオーバーレイされるようです。
<label>Text:
<span style="position: relative;">
<input id="placeholder1314588474481" name="text" maxLength="6" type="text" placeholder="Hi Mom">
<label style="font: 0.75em/normal sans-serif; left: 5px; top: 3px; width: 147px; height: 15px; color: rgb(186, 186, 186); position: absolute; overflow-x: hidden; font-size-adjust: none; font-stretch: normal;" for="placeholder1314588474481">Hi Mom</label>
</span>
</label>
他にもシムはありますが、全部は見てません。そのうちの1つは、プレースホルダー.jsは、「依存関係はありません (そのため、ほとんどのプレースホルダー ポリフィル スクリプトとは異なり、jQuery を含める必要はありません)」と宣伝しています。
編集：「何を」よりも「どのように」に興味がある人のために、高度な HTML5 プレースホルダー ポリフィルを作成する方法これを実行する jQuery プラグインを作成するプロセスについて説明します。
また、以下も参照してくださいIE10 でプレースホルダーにフォーカスを維持するFirefox や Chrome とは異なり、IE10 でフォーカスするとプレースホルダー テキストが消える方法についてのコメント。この問題の解決策があるかどうかはわかりません。