7

バックグラウンド

テーブルの最初の列の強調表示を無効にしようとしています。

HTML ソース

<table>
<tbody>
    <tr><td class="unselectable" unselectable="on"><button value="1" unselectable="on" class="unselectable"><div unselectable="on" class="unselectable">&#x2718;</div></button></td><td>Row 1</td></tr>
    <tr><td class="unselectable" unselectable="on"><button value="2" unselectable="on" class="unselectable"><div unselectable="on" class="unselectable">&#x2718;</div></button></td><td>Row 2</td></tr>
    <tr><td class="unselectable" unselectable="on"><button value="3" unselectable="on" class="unselectable"><div unselectable="on" class="unselectable">&#x2718;</div></button></td><td>Row 3</td></tr>
</tbody>
</table>

CSS ソース

*.unselectable {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: -moz-none;
  -ms-user-select: none;
  user-select: none;
}

フィドル

http://jsfiddle.net/2LQfg/1/

問題

ユーザーがテーブル上でマウス ボタンを選択してドラッグすると、ボタン テキスト (✘) が強調表示されて表示されます (望ましくない動作)。ユーザーが値をコピーして貼り付けると、値 (✘) は含まれません (望ましい動作)。

明確にするために、これは現在の動作です（望ましくない）：

望ましくない

次の図は、テーブル上でマウスをドラッグした後の目的の動作を示しています。

望ましい

ほとんどのユーザーはおそらく気にしないでしょうが、これは少し誤解を招くユーザー エクスペリエンスです。ユーザーがテキストを強調表示してコピーする場合、強調表示されたすべてのテキストがコピーされることが期待されます。クラスを追加するunselectableと、ボタンの (✘) 値が強調表示されますが、コピーされません。に設定されているため、ユーザーは (✘) を強調表示 (選択) することはできませんunselectable。

環境

Xubuntu で Firefox 19.0.2 を使用していますが、クロスブラウザー ソリューションを探しています。

質問

ユーザーが最初の表の列(ボタンを含む)を強調表示できないようにするクロスブラウザの方法は何ですか?

関連している

4

2 に答える 2

1

ただの回避策

これまでのところ、これにはかなり不便な回避策しか見つかりませんでした。要素内のすべての「実際の」テキストを非表示にし、疑似要素unselectableを介して:before疑似テキストに置き換えます。注: HTML に「実際の」テキストを実際に含める必要がない場合は、ネストされたspan要素 (したがって、冗長な HTML の一部) と関連する以下の CSS を削除できますが、それはテキストがどの程度「重要」であるかによって異なります。実際のアプリケーション (スクリーン リーダー、検索エンジンなど) にあります。

フィドルの例。

HTML

<table>
<tbody>
    <tr><td><button value="1"><div class="unselectable" data-content="&#x2718"><span>&#x2718;</span></div></button></td><td>Row 1</td></tr>
    <tr><td><button value="2"><div unselectable="on"   class="unselectable" data-content="&#x2718"><span>&#x2718;</span></div></button></td><td>Row 2</td></tr>
    <tr><td><button value="3"><div unselectable="on"  class="unselectable" data-content="&#x2718"><span>&#x2718;</span></div></button></td><td>Row 3</td></tr>
</tbody>
</table>

CSS

*.unselectable {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: -moz-none;
  -ms-user-select: none;
  user-select: none;
}

*.unselectable span {
    display: none;
}

*.unselectable:before {
    content: attr(data-content);
}
于 2013-04-02T03:22:03.560 に答える