Сделать текст невыбираемым и некопируемым (webkit, окруженный копируемым текстом)

следующий фрагмент показывает, как сделать текст невыбираемым. К сожалению, если вы выбираете текст с обеих сторон в Chrome, при копировании и вставке невыбранный текст также вставляется.

есть ли способ иметь много записей с неизбирательным контентом, который вы можете копировать и вставлять, и ни один из неизбирательного контента не является наклеили?

.hide {
  color: orange;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
<div>Hello this text is selectable <span class="hide">but I'm not</span> You can select me all day!</div>

http://codepen.io/regan-ryan/pen/XdodGx

edit: этот вопрос действительно кажется возможным дубликатом, видя, что есть что-то вроде 12 вопросов уже по этой теме. Однако я не мог найти свою конкретную проблему после обширного поиска, поэтому я подумал, что она заслуживает собственного вопроса с более конкретным названием вопроса.

8
css html selection

3 ответов

более обходной путь: вы можете использовать тот факт, что CSS генерируемый контент невидим для буфера обмена ( * ), поэтому с пустым промежутком с текстом, перемещенным в некоторый атрибут, у вас есть визуально аналогичный результат с запрошенным поведением clibpoard:

[data-text] {
  color: orange;
}
[data-text]::after {
  content: attr(data-text);
}
<div>Hello this text is selectable <span data-text="but I'm not"></span> You can select me all day!</div>

http://codepen.io/myf/pen/jqXrNZ

Если доступность / SEO не вызывает беспокойства, это может быть решением. В другом случае это может быть реальный текст в HTML, но перемещен в атрибут со скриптом "по требованию".

(*) обновление: как отмечено в комментарии ( Как отключить выделение текста с помощью CSS? ) Internet explorer фактически включает в себя CSS генерируемый контент в буфере обмена. Аргх.

18

css может отключить выделение выделения, но если вы хотите использовать не копировать текст, Используйте этот небольшой фрагмент кода jQuery

$('.hide').on('copy paste cut drag drop', function (e) {
   e.preventDefault();
});


$('.hide').on('copy paste cut drag drop', function (e) {
       e.preventDefault();
    });
.hide {
  color: orange;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>Hello this text is selectable <span class="hide">but I'm not</span> You can select me all day!</div>
2

вы можете попробовать прочитать выделенный текст с помощью window.getSelection. Пожалуйста, попробуйте следующий пример кода и посмотрите в консоль. При этом, вы можете удалить ненужный текст из строки и скопировать его в буфер обмена. Но это не так просто, возможно, даже невозможно. Это просто идея.

function getSelectedText() {
  console.log(window.getSelection());
}

document.onmouseup = getSelectedText;
document.onkeyup = getSelectedText;
.hide {
  color: orange;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}
<!-- begin snippet: js hide: false -->
<div>Hello this text is selectable <span class="hide" unselectable="on">but I'm not</span> You can select me all day!</div>
1