Правило CSS для отключения выделения столбца таблицы при выборе

Задний план

Хотите отключить выделение первого столбца таблицы.

Источник 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.

Окружающая обстановка

Я использую Firefox 19.0.2 на Xubuntu, но ищу кросс-браузерное решение.

Вопрос

Каким кроссбраузерным способом запретить пользователю выделять первый столбец таблицы (содержащий кнопки)?

Связанный


css html-table select highlight cross-browser
person Dave Jarvis    schedule 02.04.2013    source источник
comment
Я не совсем понимаю, в чем ваш вопрос? вы не хотите, чтобы при нажатии на нее выделялась синяя подсветка?   -  person Mitchell Layzell    schedule 02.04.2013
comment
@MitchellLayzell попытается скопировать и вставить его таблицу, и вы поймете, что он имеет в виду.   -  person He Hui    schedule 02.04.2013
comment
Вы пробовали этот stackoverflow.com/a/1224550/1468180?   -  person viclim    schedule 02.04.2013

Ответы (2)


arrow_upward
2
arrow_downward

Браузеры не будут копировать контент, если он установлен с помощью правила content CSS. Надеюсь, вам не нужно поддерживать IE7

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

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

person Explosion Pills    schedule 02.04.2013

arrow_upward
1
arrow_downward

Просто обходной путь

Пока что я нашел только довольно неудобный обходной путь. Он скрывает весь «фактический» текст в элементе 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);
}
person ScottS    schedule 02.04.2013
comment
Пока я настраивал гибкость, @ExplosionPills превзошла меня в псевдоэлементном ответе :-). - person ScottS; 02.04.2013