1

input type='text'テキスト入力 (または)の上にカスタム プレースホルダー テキスト要素を配置したいと思いますtextarea。ただし、プレースホルダーのテキスト要素がその真上にある場合、テキスト入力をクリック可能にする方法がわかりません。pointer-events:noneプレースホルダーをクリックできないようにする設定はうまく機能しますが、古いバージョンの IE ではサポートされていません。

通常、子要素のpointer-events:noneを手動でトリガーすることを含む回避策。onclickただし、テキスト入力の場合、onclickこれはブラウザーによって暗黙的に行われるため、トリガーするイベントはありません。

私が検討した他の解決策にはonclick、テキスト入力にフォーカスするためにプレースホルダーに を設定することが含まれますが、これは、カーソルが常に入力の最後に配置されることを意味します。テキスト入力をクリックして、クリックした場所にカーソルを表示できるようにしたい。

もう 1 つのオプションは、 を使用z-indexして入力の下にプレースホルダーを配置し、入力を透明にすることです。ただし、これは入力のデフォルトの境界線も削除するため、望ましくありません。

HTML/CSS と純粋な Javascript (jquery なし) のみを使用して、テキストがその上に表示されている場合でも、テキスト入力をクリック可能にするにはどうすればよいですか?

4

1 に答える 1

4

Javascriptなしでこれを行うことができます。<label>次のようなタグを使用してください。

<label class="placeholder" for="name">Name</label>
<input type="text" id="name">

forラベルをクリックするときにおよび属性を使用するidことで、ブラウザはリンクされたフォーム フィールドにフォーカスを切り替えます。focus次に、たとえば、JavaScript でイベントをリッスンしてプレースホルダーを非表示にすることができます。を使用するには、プレースホルダー ラベルのスタイルを設定する必要がありますposition: absolute。実際の例を参照してください(いくつかのフォームについては下にスクロールしてください)。

プレースホルダー テキストを定義する上記の方法には、いくつかの利点があります。

  1. 実際にフィールドのラベルを定義します。これはおそらくアクセシビリティに役立ちます。
  2. フォーム フィールドの値とプレースホルダー テキストを分離することで、部分的に入力されたフォームをサポートできます。
  3. placeholder属性を使用するよりも多くのブラウザーをサポートできます。
  4. 好きなようにタグのスタイルを設定できますが、これは属性labelにとってそれほど簡単ではありません。placeholderCSS や JS アニメーションを使用することもできます。
于 2013-08-26T20:49:22.527 に答える