0

次のようなレイアウトがあります。

HTML

<div class="Non-Select">
  <div>Title</div>
  <div><input name="title" type="textbox" /></div>
</div>

CSS:

Non-Select {
  user-select: none; 
  -khtml-user-select: none; 
  -moz-user-select: none;
}

テキスト ボックスでテキストを選択できるように、Non-Select クラスをオーバーライドできるようにしたいと考えています。

どんな提案でも大歓迎です。

4

4 に答える 4

2

テキストを選択不可にするには、2 つの方法があることを理解する必要があります。バージョン 10 より前の Opera と Internet Explorer が必要な場合 (ほとんどの場合、肯定的です)) -unselectableの値を持つ属性を使用する必要がありますon。

ここで重要なことは、この属性を親ラッパーに設定.Non-Selectした場合 (この場合、子要素のテキストを引き続き選択できること) 、このフィドルを Opera または IE 9 までで開いて確認することです。したがって、選択してはならないすべての単一要素にこの属性を追加する必要があります (可能な子要素が多数 (または不明な数) ある場合は、JavaScript を介して動的に追加する可能性があります)。

他のブラウザーの選択を無効にするには、css3user-selectプロパティを使用できます。この CSS を追加するクールな方法は、次のattribute selectorようになります。

[unselectable="on"]{
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}

したがって、この属性を持つ要素のテキストは、一般的なブラウザのほとんどで選択できません。

2 番目の方法は短いです。IE や Opera が必要ない場合は、Firefox、Chrome、IE10 で動作するようにコードを少し変更する必要があります。

.Non-Select {
    -webkit-user-select: none;
    -khtml-user-select: none; 
    -moz-user-select: -moz-none;
    -ms-user-select: none;
    user-select: none; 
}
.Non-Select input {
    -webkit-user-select: text;
    -khtml-user-select: text; 
    -moz-user-select: text;
    -ms-user-select: text;
    user-select: text; 
}

-moz-none私が追加した標準外の値に注意してください。MDN でこのプロパティについて注意深く読むと、Mozillaが子要素の選択を有効にするために、この非標準バージョンを導入したことがわかります。2 番目の方法の実際の例をここで見ることができます: - http://jsfiddle.net/jxnEb/5/

編集: selection に関する同様の質問がありました。unselectable作成者がすべての子要素に属性を再帰的に追加する関数を記述した、受け入れられた回答に注意してください。（あなたの場合input、もちろんフィルタリングする必要があります）。

于 2012-08-09T09:11:47.160 に答える
1

Non-Select 内の入力に対するデフォルトの動作をオーバーライドできます。

.Non-Select{
  user-select: none; 
  -khtml-user-select: none; 
  -moz-user-select: none;
}
.Non-Select input{
  user-select: text; 
  -khtml-user-select: text; 
  -moz-user-select: text;
}
于 2012-08-09T08:05:31.543 に答える
0

このCSSを使用

.Non-Select input {
  user-select: none; 
  -khtml-user-select: none; 
  -moz-user-select: none;
}
于 2012-08-09T07:46:02.003 に答える
0

次のように CSS を変更するだけです。

.Non-Select {
   -webkit-user-select: none;
    -khtml-user-select: none; 
      -moz-user-select: none;
        -o-user-select: none;
           user-select: none; 
}

クラス名の前のドットを忘れました。

それは、望ましい結果を達成するのに十分です。

于 2012-08-09T08:06:11.243 に答える