背景

希望禁用突出显示表格的第一列。

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，但我寻求一种跨浏览器的解决方案。

题

什么是防止用户突出显示第一个表格列（包含按钮）的跨浏览器方式？

有关

如何禁用文本选择突出显示使用CSS？

有没有办法让DIV无法选择？

使用CSS或其他非JS方法模仿“onselectstart = return false”？

http://www.mindfiresolutions.com/Using-of-onselectstart-and-its-alternative-for-Firefox-239.php

http://therelentlessfrontend.com/2010/02/13/how-to-disable-text-selection-in-a-table/

---

如果通过content CSS规则设置内容，浏览器似乎不会复制内容。 希望你不需要支持IE7

button.unselectable:after {
    content: "2718";
}

http://jsfiddle.net/ExplosionPIlls/2LQfg/50/

---

只是一个解决方法

到目前为止，我只找到一个相当不方便的解决方法。 它将所有“实际”文本隐藏在不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);
}

链接地址: http://www.djcxy.com/p/12617.html

上一篇: CSS rule to disable highlighting table column upon selection

下一篇: write multiple stdin