Skip to content

A collection of ideas to disable text copying.

Notifications You must be signed in to change notification settings

boarwell/no-copy

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

13 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

no-copy

A collection of ideas to disable text copying.

Technically, there is no way to completely disable text copying, since users can modify CSS or stop JavaScript on the client side. There are also UX concerns with disabling it.

javascript - how to restrict user to copy web content - Stack Overflow

This is just a collection of ideas and not intended to be used for serious purposes.

Change Order (CSS)

Use display: inline-flex and order: xxx

based on HTML でコピペできそうでできない要素を作る - mizchi's blog

Demo ➡

user-select: none (CSS)

The most straightforward way, used on Google's lyrics search result pages.

Demo ➡

Prevent copy Event (JavaScript)

Replace with image (HTML)

Draggable (HTML)

<section draggable="true">
  <p>~~~</p>
  <p>~~~</p>
  <p>~~~</p>
</section>

Demo ➡

When draggable="true" is set on an element that has a text, the default browser behavior (in this case, text selection) will be replaced with dragging the element. Thus, the text will not be selected.

draggable - HTML: HyperText Markup Language | MDN

However, the element can still be selected if text selection starts from other elements. This is also not a perfect solution.

About

A collection of ideas to disable text copying.

Resources

Stars

Watchers

Forks