背景
希望禁用突出显示表格的第一列。
HTML 源代码
<table>
<tbody>
<tr><td class="unselectable" unselectable="on"><button value="1" unselectable="on" class="unselectable"><div unselectable="on" class="unselectable">✘</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">✘</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">✘</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
类,按钮的 (✘) 值会突出显示,但不会被复制。用户根本不应该能够突出显示(选择)(✘),因为它设置为unselectable
。
环境
我在 Xubuntu 上使用 Firefox 19.0.2,但我寻求跨浏览器的解决方案。
问题
防止用户突出显示第一个表格列(包含按钮)的跨浏览器方法是什么?