Javascript block select text

How to Disable Text Selection, Copy, Cut, Paste and Right-click on a Web Page

There can be some cases when preventing certain parts of your web page from being selected could be profitable.

Because disabled user-selection is very annoying, you had better not set it for your whole website. Instead, disable text selection for the parts or on the specific articles that you afraid might be stolen. Use it in situations where it will enhance the UX of your website.

No matter what is the reason for disabling user-selection on your website, if you have come to that step, this is the right place to learn how to that with CSS, Javascript and jQuery easily.

How to Disable Text Selection Highlighting with CSS

It’s not a difficult task to make a text unselectable. All you need to do is to disable the text selectivity for all the browsers that your webpage is likely to be loaded on.

Let’s see what extensions to use for different browsers to disable the selectivity of a text.

• Chrome, Opera (older versions), IOS Safari: -webkit-user-select
• Safari: -webkit-touch-callout
• Mozilla: -moz-user-select
• KHTML browsers (Konqueror): -khtml-user-select

Chrome starting from 54.0 version and Opera starting from 41.0 version support the user-select without the -webkit- prefix.

Example

html> html> head> title>Title of the document title> style> .unselectable < -webkit-user-select: none; -webkit-touch-callout: none; -moz-user-select: none; -ms-user-select: none; user-select: none; color: #cc0000; > style> head> body> p>I am a selectable text. You can select me. p> div class="unselectable">I am an unselectable text. My text selection is disabled. div> body> html>

Источник

Select All Div Text On Mouse Click using JavaScript

Hi! Let’s see how to select all div text on single mouse click using javascript. At times you may let site users to copy block of text or code snippets. In such case users has to click on and drag the mouse to select the entire text. But you can make users to copy complete text with just a single mouse click. Say for example you have a div container with some code snippet. When user clicks anywhere inside div the whole content of the element will be selected. This will drastically improve user experience. And you can achieve it with good old javascript. Here’s how to do it.

Selecting All Div Text on Mouse Click in JavaScript

The method I’m going to show you will not only select text inside div but works with any html element. It can be a paragraph element, textbox or text area.

Here’s the javascript function to select complete text of a given container.

Create JavaScript Function

Here’s how the above javascript function works.

• The method document.body.createTextRange() will create a text range for the entire document.
• Next selectNode() will mark the start and end of the text inside the given container.
• Finally select() method will select the text between the given text range

Function Usage

Create a element and call the function selectAllText() on click event.

Clicking anywhere inside the div will select it’s entire text content. This will be very useful to copy paste code snippets or other texts with just a single mouse click.

As I already said you can replace the div container with any other html element. The same function will work for them as well.

If you want to implement something similar with jquery you have to use select() function.

Likewise you can select all div text with single mouse click in javascript. I hope you find this script useful. Meet you in another interesting tutorial 🙂

Источник

Unselectable Text In HTML & JS (Very Simple Examples)

Welcome to a quick tutorial on how to make unselectable text in HTML. So you have a not-so-top-secret website that you want to protect? Stop people from highlighting and copying the text?

1. In CSS, simply add the user-select: none property.
2. In Javascript, document.getElementById(«TARGET»).onselectstart = () => false;

That covers the basics, but let us walk through a few more examples in this guide – Read on!

TLDR – QUICK SLIDES

TABLE OF CONTENTS

UNSELECTABLE TEXT

All right, let us now walk through how to stop text highlighting in this section, and a few more extra measures.

1) CSS NO TEXT SELECT

• As with the above introduction, user-select: none is all we need to stop people from highlighting a block of text.
• All the -webkit -moz -ms prefix is just-in-case, to maintain cross-browser compatibility.
• Lastly, .nohigh::selection < background: transparent; >is a small trick to further confuse people with a transparent highlight – Should the “main” user-select: none fails.

2) JAVASCRIPT HIGHLIGHT STOPPER

This is the Javascript way to prevent text highlighting, just hit return false when the user selects a block of text. But please take note that there is a restriction with this method – Users can still select this block of text by starting the highlighting from somewhere else…

3) TOO MUCH EFFORT, NO PROTECTION. WORTH IT?

• Right-click > View source code > Copy.
• Right-click > Inspect element > Copy.
• Save HTML page as > Copy.
• Print as PDF > Copy.

I mean, having a lock is better than none, but is it really worth all the trouble to stop people from copying? You decide for yourself.

DOWNLOAD & NOTES

Here is the download link to the example code, so you don’t have to copy-paste everything.

SUPPORT

600+ free tutorials & projects on Code Boxx and still growing. I insist on not turning Code Boxx into a «paid scripts and courses» business, so every little bit of support helps.

EXAMPLE CODE DOWNLOAD

Click here for the source code on GitHub gist, just click on “download zip” or do a git clone. I have released it under the MIT license, so feel free to build on top of it or use it in your own project.

EXTRA BITS & LINKS

That’s all for this guide, and here is a small section on some extras and links that may be useful to you.

THE REAL PROTECTION – LEGAL PROTECTION

Not a sponsored message, but if the contents are really that valuable, sign up with DMCA instead – It’s free. Get them to help with the legal takedown actions (legal and admin fee are separate), so long as you can prove the contents are yours.

LINKS & REFERENCES

TUTORIAL VIDEO

INFOGRAPHIC CHEAT SHEET

THE END

Thank you for reading, and we have come to the end of this guide. I hope that it has helped you with your project, and if you want to share anything with this guide, please feel free to comment below. Good luck and happy coding!

Leave a Comment Cancel Reply

Search

Breakthrough Javascript

Take pictures with the webcam, voice commands, video calls, GPS, NFC. Yes, all possible with Javascript — Check out Breakthrough Javascript!

Socials

About Me

W.S. Toh is a senior web developer and SEO practitioner with over 20 years of experience. Graduated from the University of London. When not secretly being an evil tech ninja, he enjoys photography and working on DIY projects.

Code Boxx participates in the eBay Partner Network, an affiliate program designed for sites to earn commission fees by linking to ebay.com. We also participate in affiliate programs with Bluehost, ShareASale, Clickbank, and other sites. We are compensated for referring traffic.

Источник