1. ホーム
  2. javascript

[解決済み] Internet Explorerの入力プレースホルダー

2022-04-21 20:37:44

質問

HTML5では placeholder 属性は input 要素を使用すると、デフォルトのテキストをグレーアウトして表示することができます。

しかし、IE9を含むInternet Explorerは、残念ながらこれをサポートしていません。

すでにいくつかのプレースホルダー・シミュレーター・スクリプトがあります。これらは通常、デフォルトテキストを入力フィールドに入れ、それを灰色にし、入力フィールドにフォーカスを移すとすぐにそれを取り除くという仕組みになっています。

この方法の欠点は、プレースホルダーのテキストが入力フィールドにあることです。したがって

  1. スクリプトは、入力フィールドが空かどうかを簡単にチェックすることができません。
  2. サーバーサイドの処理では、データベースにプレースホルダーを挿入しないために、デフォルト値との照合を行う必要があります。

プレースホルダーのテキストが入力そのものに含まれないような解決策が欲しいのですが。

どのように解決するのですか?

の「Web Forms : input placeholder"」セクションを見ると、以下のように表示されています。 HTML5 クロスブラウザポリフィル というのも、私が見たのは jQuery-html5-placeholder .

を試してみました。 デモ を IE9 で表示させたところ。 <input> をスパンで囲み、ラベルとプレースホルダーテキストを重ね合わせます。

<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>

そこには他のシムもありますが、全部は見ていません。 そのうちのひとつを紹介します。 プレースホルダー.js という宣伝文句で、quot;No dependencies (so no need to include jQuery, unlike most placeholder polyfill scripts)." と表示されています。

編集する どのように、どのように、どのように、どのように、どのように、どのように、どのように、どのように、どのように、どのように。 高度なHTML5プレースホルダーポリフィルの作成方法 これを実現するためのjQueryプラグインの作成手順を解説しています。

また IE10 でフォーカス時にプレースホルダーを保持する には、FirefoxやChromeと異なるIE10でのフォーカス時のプレースホルダーテキストの消え方についてのコメントがあります。 この問題に対する解決策があるかどうかはわかりません。