1

カスタム プレースホルダー要素が入力の上に配置されている場合 (たとえばposition: absolute)、入力をクリックすることはできません。ほぼクロスブラウザーのソリューションは、プレースホルダーを「非対話型」にすることです。

.noninteracting {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: -moz-none;
  -ms-user-select: none;
  user-select: none;
  pointer-events: none;
}

ただし、pointer-events: noneIE ではサポートされていません。多くの代替案がここに提案されていますが、それらはハッキーに見え、私がやりたいことにはやり過ぎかもしれません。

テキストを他の要素の上に配置するが、ユーザーがそれを操作できないようにするための、クロスブラウザーで最もハッキリしない方法は何ですか?

4

2 に答える 2

0

これが最良の選択肢だと思います。さまざまなコンポーネントが含まれていますが、考えられるすべてのシナリオをカバーしていると思います。

クラス「no-js」を html 要素に追加します。

  <html class="no-js">

各入力フィールドにはラベルがあります。

  <label class="no-js-label">Email Address</label>

Javascript が有効になっている場合は、ヘッダーのクラスを削除して、ラベルを非表示にします。

 .no-js-label { display:none; }
 .no-js .no-js-label { display:none; }

次に、ポリフィルで html5 プレースホルダーを使用します。このリストには、多数のオプションが含まれています。 https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills

于 2013-08-26T22:39:32.193 に答える