Как исключить фрагменты текста при копировании - PullRequest
3 голосов
/ 17 июля 2010

Я пытаюсь сделать текст не подлежащим копированию, моя цель не помешать людям копировать текст с моего сайта, а сделать его проще для использования. У меня есть список файлов с размером файла, но я хочу скопировать только имена файлов, а не размер файла.

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

Я только что пытался использовать кнопку, чтобы предотвратить копирование, который не работал эфир, какие-нибудь идеи?

<a href="http://10.10.10.1/links/file.doc"file.doc</a>
 <button type="button" disabled="disabled" id="filesize">6 MB</button><br \>

Целевым браузером является Safari на Mac, поэтому подойдут экспериментальные команды CSS3 или HTML5, которые работают в последней версии Safari.

(Спасибо mvds за предложенное название и одно решение)

Ответы [ 3 ]

2 голосов
/ 17 июля 2010

Предупреждение о гадком хакере: создайте 2 версии вашего текста, одну с одним и одну без размеров, в остальном идентичные, и поместите их в перекрывающиеся элементы div, причем версия без размеров имеет более высокий z-индекс.

Лучшее решение, возможно, не кросс-браузерное, это добавить

<input type="text" value="(6 MB)" style="border:0; ...">

Я предлагаю переименовать вопрос «как исключить части текста при копировании», потому что в его нынешнем виде звучит так, будто вы ищете среднюю безнадежную схему защиты от копирования, тогда как вопрос довольно интересный.

2 голосов
/ 09 августа 2015

Довольно хакерский способ сделать эту работу - использовать псевдоэлементы ::before или ::after для вставки текста с использованием свойства css content:.

HTML:

<a href="http://10.10.10.1/links/file.doc">file.doc</a>  
<button type="button" disabled="disabled" id="filesize"><i></i></button>

CSS:

button i:before {
 content: '6 MB';
}

Плюсы: Работает: не копируется в буфер обмена даже при выборе нескольких строк.

Минусы: Псевдоэлементы требуют особого внимания для стиля CSS, поскольку они вставляются за пределы обычного потока документов. Использование свойства content: для нескольких элементов также потребует пользовательских тегов или встроенных CSS.

0 голосов
/ 17 июля 2010

Используйте span (или любой другой текстовый контейнер) и атрибут unselectable, например:

<a href="http://10.10.10.1/links/file.doc">file.doc</a>
<span unselectable="on">6 MB</span>

Это не сработает, но, поскольку у вас есть конкретная цель для браузера, это будетотлично работает в вашей ситуации:)

Чтобы легко поддерживать еще несколько браузеров, вы можете добавить туда немного CSS, сначала определите класс следующим образом:

.unselectable { 
  user-select: none; 
  -moz-user-select: none; 
  -khtml-user-select: none; 
}

Затем назначьте это так:

<a href="http://10.10.10.1/links/file.doc">file.doc</a>
<span class="unselectable" unselectable="on">6 MB</span>
...