CSS: выделение контента в блоке по одному клику
При создании сайта вы пытаетесь решить некоторые реальные проблемы. Люди не приходят на ваш сайт, чтобы посмотреть на сайт. На сайте может быть интересный контент или важная информация, которая им нужна. Часто нужная им информация копируется в какое-то другое приложение.
В следующей таблице приведены некоторые ячейки, которые легко скопировать, а некоторые - немного сложнее.
В течение следующих нескольких минут мы рассмотрим, как можно легко скопировать все ячейки с данными для большинства используемых сегодня браузеров!
User-select: all;
Добавив немного CSS в таблицу, мы можем сделать выбор текста в ячейках одним щелчком мыши. Это решение в настоящее время работает для Firefox и Chrome.
CSS, который мы добавили в таблицу:
table {
user-select: all;
}Курсор
Когда вы нажимаете на любое содержимое в ячейках, выбираются все ячейки. Но мы не сообщаем об этом пользователям. Нам нужен какой-то способ сообщить пользователю заранее, что произойдет, когда он нажмет на текст. Добавляя стиль cursor: cell; в ячейку, мы даем пользователю знать, что содержимое ячейки может быть выбрано.
table td {
user-select: all;
cursor: cell;
}Полифил
Теперь у нас есть решение, которое позволяет пользователям Chrome и Firefox понимать, что они могут выбирать содержимое ячейки, но мы хотим поддерживать и остальную часть Интернета.
Во-первых, мы добавляем класс к элементам, которые мы хотим выбрать, просто щелкая элемент.
Затем мы добавляем следующий polyfill для загрузки в конце нашего документа.
// based on https://stackoverflow.com/a/20079910
//Supports IE9+
function userSelectAll(event) {
window.getSelection()
.selectAllChildren(
event.target
);
}
// Use CSS.suports to only run polyfill for browsers not supporting the property
if(!CSS || CSS.suports || !CSS.supports("user-select", "all")){
var elementsToSelectOnClick = document.querySelectorAll(".user-select-all");
for(var i = 0; i < elementsToSelectOnClick.length; i++){
elementsToSelectOnClick[i].onclick = userSelectAll;
}
}
Конечный результат должен работать для большинства браузеров.
Приятно знать, что мы можем многое сделать, не полагаясь на библиотеки. Немного CSS и JavaScript имеют большое значение. Также приятно видеть, что простое решение может принести большую пользу вашим пользователям!
