😁How to disable text selection highlighting (ok)

https://stackoverflow.com/questions/826782/how-to-disable-text-selection-highlighting

Đọc thêm: How to Disable Text Selection, Copy, Cut, Paste and Right-click on a Web Pagearrow-up-right có bên dưới

Ask Questionarrow-up-rightAsked 14 years, 2 months agoModified 7 months agoarrow-up-rightViewed 2.7m timesReport this ad6036

For anchors that act like buttons (for example, the buttons on the sidebar of this Stack Overflow page titled Questions, Tags, and Users) or tabs, is there a CSS standard way to disable the highlighting effect if the user accidentally selects the text?

I realize that this could be done with JavaScript and a little googling yielded the Mozilla-only -moz-user-select option.

Is there a standard-compliant way to accomplish this with CSS, and if not, what is the "best practice" approach?

Sharearrow-up-rightFollowedited Jul 24, 2022 at 23:50arrow-up-rightMateen Ulhaq's user avatararrow-up-rightMateen Ulhaqarrow-up-right24.1k1818 gold badges9999 silver badges132132 bronze badgesasked May 5, 2009 at 20:29anon

Show 1 more commentarrow-up-right

45 Answers

Sorted by: Highest score (default) Trending (recent votes count more) Date modified (newest first) Date created (oldest first) 12arrow-up-rightNextarrow-up-right8508+50

UPDATE January, 2017:

According to Can I usearrow-up-right, the user-select + -webkit-user-select for Safari is enough to achieve desired behavior in all major browsers.


These are all of the available correct CSS variations:

Run code snippetExpand snippet


Note that user-select is in standardization process (currently in a W3C working draftarrow-up-right). It is not guaranteed to work everywhere and there might be differences in implementation among browsers. Also, browsers can drop support for it in the future.


More information can be found in Mozilla Developer Network documentationarrow-up-right.

The values of this attribute are none, text, toggle, element, elements, all and inherit.

Sharearrow-up-rightFollowedited Aug 18, 2022 at 9:38arrow-up-rightcommunity wiki 39 revs, 24 users 20% arrow-up-rightBlowsiearrow-up-right

Show 3 more commentsarrow-up-right951+50

In most browsers, this can be achieved using proprietary variations on the CSS user-select property, originally proposed and then abandoned in CSS 3arrow-up-right and now proposed in CSS UI Level 4arrow-up-right:

For Internet Explorer < 10 and Operaarrow-up-right < 15, you will need to use the unselectable attribute of the element you wish to be unselectable. You can set this using an attribute in HTML:

Sadly this property isn't inherited, meaning you have to put an attribute in the start tag of every element inside the <div>. If this is a problem, you could instead use JavaScript to do this recursively for an element's descendants:


Update 30 April 2014: This tree traversal needs to be rerun whenever a new element is added to the tree, but it seems from a comment by @Han that it is possible to avoid this by adding a mousedown event handler that sets unselectable on the target of the event. See http://jsbin.com/yagekiji/1arrow-up-right for details.


This still doesn't cover all possibilities. While it is impossible to initiate selections in unselectable elements, in some browsers (Internet Explorer and Firefox, for example) it's still impossible to prevent selections that start before and end after the unselectable element without making the whole document unselectable.

Sharearrow-up-rightFollowedited Nov 24, 2019 at 12:36arrow-up-rightPeter Mortensen's user avatararrow-up-rightPeter Mortensenarrow-up-right30.8k2121 gold badges105105 silver badges131131 bronze badgesanswered Dec 5, 2010 at 11:45Tim Down's user avatararrow-up-rightTim Downarrow-up-right317k7575 gold badges453453 silver badges534534 bronze badges

Add a commentarrow-up-right233

Until CSS 3's user-selectarrow-up-right property becomes available, Geckoarrow-up-right-based browsers support the -moz-user-select property you already found. WebKitarrow-up-right and Blink-based browsers support the -webkit-user-select property.

This of course is not supported in browsers that do not use the Gecko rendering engine.

There is no "standards" compliant quick-and-easy way to do it; using JavaScript is an option.

The real question is, why do you want users to not be able to highlight and presumably copy and paste certain elements? I have not come across a single time that I wanted to not let users highlight a certain portion of my website. Several of my friends, after spending many hours reading and writing code will use the highlight feature as a way to remember where on the page they were, or providing a marker so that their eyes know where to look next.

The only place I could see this being useful is if you have buttons for forms that should not be copy and pasted if a user copy and pasted the website.

Sharearrow-up-rightFollowedited Apr 17, 2016 at 5:17arrow-up-rightPeter Mortensen's user avatararrow-up-rightPeter Mortensenarrow-up-right30.8k2121 gold badges105105 silver badges131131 bronze badgesanswered May 5, 2009 at 20:37X-Istence's user avatararrow-up-rightX-Istencearrow-up-right16.3k66 gold badges5757 silver badges7474 bronze badges

Add a commentarrow-up-rightReport this ad207

A JavaScript solution for Internet Explorer is:

Sharearrow-up-rightFollowedited Jul 31, 2019 at 19:30arrow-up-rightPeter Mortensen's user avatararrow-up-rightPeter Mortensenarrow-up-right30.8k2121 gold badges105105 silver badges131131 bronze badgesanswered Nov 13, 2009 at 16:05Pekka's user avatararrow-up-rightPekkaarrow-up-right441k142142 gold badges972972 silver badges10861086 bronze badges

Add a commentarrow-up-right156

If you want to disable text selection on everything except on <p> elements, you can do this in CSS (watch out for the -moz-none which allows override in sub-elements, which is allowed in other browsers with none):

Sharearrow-up-rightFollowedited Oct 29, 2013 at 17:09arrow-up-rightJames Donnelly's user avatararrow-up-rightJames Donnellyarrow-up-right126k3434 gold badges208208 silver badges218218 bronze badgesanswered May 24, 2011 at 21:24Benjamin Crouzier's user avatararrow-up-rightBenjamin Crouzierarrow-up-right40.1k4444 gold badges169169 silver badges234234 bronze badges

Add a commentarrow-up-right138

In the solutions in previous answers selection is stopped, but the user still thinks you can select text because the cursor still changes. To keep it static, you'll have to set your CSS cursor:

Run code snippetExpand snippet

This will make your text totally flat, like it would be in a desktop application.

Sharearrow-up-rightFollowedited Nov 2, 2019 at 14:23arrow-up-rightPeter Mortensen's user avatararrow-up-rightPeter Mortensenarrow-up-right30.8k2121 gold badges105105 silver badges131131 bronze badgesanswered Aug 30, 2015 at 18:32ZECTBynmo's user avatararrow-up-rightZECTBynmoarrow-up-right3,18733 gold badges2525 silver badges4141 bronze badges

  • @kojow7 As opposed to "layered". Instead of text floating on top of the other elements. It is similar to the difference between SVG and PNG images. – Yetiarrow-up-right Sep 19, 2018 at 9:35arrow-up-right

  • 4Was surprised to discover that Firefox still requires the vendor prefix in 2019. I disregardfully used only user-select: none;, thinking the standard would be adopted by now, but sadly it has not. Makes you wonder what the people on the standards committee could still be debating. "No, you guys... I really think it should be user-select: cant; because it's like more descriptive, you know?" "We've been over this, Mike. We would have to omit the apostrophe, and that's bad form!" "Enough, everyone! We will deliberate on this matter again next month. Standards Committee meeting adjourned!" – Mentalistarrow-up-right May 24, 2019 at 3:19arrow-up-right

Add a commentarrow-up-right120

You can do so in Firefox and Safari (Chrome also?)

Sharearrow-up-rightFollowedited Oct 29, 2013 at 17:09arrow-up-rightJames Donnelly's user avatararrow-up-rightJames Donnellyarrow-up-right126k3434 gold badges208208 silver badges218218 bronze badgesanswered May 5, 2009 at 20:46seanmonstar's user avatararrow-up-rightseanmonstararrow-up-right11.3k22 gold badges2121 silver badges2626 bronze badges

Add a commentarrow-up-right90

Workaround for WebKitarrow-up-right:

I found it in a CardFlip example.

Sharearrow-up-rightFollowedited Nov 24, 2019 at 12:47arrow-up-rightPeter Mortensen's user avatararrow-up-rightPeter Mortensenarrow-up-right30.8k2121 gold badges105105 silver badges131131 bronze badgesanswered Sep 21, 2011 at 7:09Alex's user avatararrow-up-rightAlexarrow-up-right91966 silver badges33 bronze badges

Add a commentarrow-up-right86

I like the hybrid CSS + jQuery solution.

To make all elements inside <div class="draggable"></div> unselectable, use this CSS:

And then, if you're using jQuery, add this inside a $(document).ready() block:

I figure you still want any input elements to be interactable, hence the :not() pseudo-selector. You could use '*' instead if you don't care.

Caveat: Internet Explorer 9 may not need this extra jQuery piece, so you may want to add a version check in there.

Sharearrow-up-rightFollowedited Apr 15, 2020 at 20:54arrow-up-rightjohannchopin's user avatararrow-up-rightjohannchopinarrow-up-right13.6k1010 gold badges5454 silver badges100100 bronze badgesanswered Nov 11, 2011 at 19:53Tom Auger's user avatararrow-up-rightTom Augerarrow-up-right19.4k2222 gold badges8181 silver badges104104 bronze badges

Show 2 more commentsarrow-up-right79

You can use CSS or JavaScript for that.

The JavaScript way is supported in older browsers, like old versions of Internet Explorer as well, but if it's not your case, use the CSS way then:

HTML/JavaScript:

Run code snippetHide resultsFull page

HTML/CSS:

Run code snippetHide resultsFull pageSharearrow-up-rightFollowedited Nov 24, 2019 at 14:04arrow-up-rightPeter Mortensen's user avatararrow-up-rightPeter Mortensenarrow-up-right30.8k2121 gold badges105105 silver badges131131 bronze badgesanswered Jun 5, 2017 at 14:03Alireza's user avatararrow-up-rightAlirezaarrow-up-right99.7k2727 gold badges266266 silver badges171171 bronze badgesAdd a commentarrow-up-right78

Run code snippetExpand snippet

It's not the best way, though.

Sharearrow-up-rightFollowedited Jun 16, 2017 at 2:37arrow-up-rightFred Gandt's user avatararrow-up-rightFred Gandtarrow-up-right4,20722 gold badges3333 silver badges4141 bronze badgesanswered May 1, 2013 at 11:36Ale's user avatararrow-up-rightAlearrow-up-right1,9981919 silver badges3131 bronze badges

Add a commentarrow-up-right66

For Internet Explorer in addition, you need to add pseudo class focus (.ClassName:focus) and outline-style: none.

Sharearrow-up-rightFollowedited Nov 24, 2019 at 13:22arrow-up-rightPeter Mortensen's user avatararrow-up-rightPeter Mortensenarrow-up-right30.8k2121 gold badges105105 silver badges131131 bronze badgesanswered Dec 23, 2013 at 14:05Elad Shechter's user avatararrow-up-rightElad Shechterarrow-up-right3,88511 gold badge2222 silver badges2222 bronze badges

Add a commentarrow-up-right62

Try to insert these rows into the CSS and call the "disHighlight" at class property:

Sharearrow-up-rightFollowedited Nov 24, 2019 at 13:58arrow-up-rightPeter Mortensen's user avatararrow-up-rightPeter Mortensenarrow-up-right30.8k2121 gold badges105105 silver badges131131 bronze badgesanswered Aug 28, 2016 at 7:13user1012506's user avatararrow-up-rightuser1012506arrow-up-right2,04811 gold badge2626 silver badges4545 bronze badgesAdd a commentarrow-up-right61

A Quick Hack Update

If you use the value none for all the CSS user-select properties (including browser prefixes of it), there is a problem which can be still occurred by this.

As CSS-Tricksarrow-up-right says, the problem is:

WebKitarrow-up-right still allows the text to be copied, if you select elements around it.

You can also use the below one to enforce that an entire element gets selected which means if you click on an element, all the text wrapped in that element will get selected. For this all you have to do is changing the value none to all.

Sharearrow-up-rightFollowedited Nov 24, 2019 at 14:11arrow-up-rightPeter Mortensen's user avatararrow-up-rightPeter Mortensenarrow-up-right30.8k2121 gold badges105105 silver badges131131 bronze badgesanswered Mar 31, 2018 at 11:32Kazmi's user avatararrow-up-rightKazmiarrow-up-right1,19899 silver badges2020 bronze badgesAdd a commentarrow-up-right55

With SASSarrow-up-right (SCSS syntax)

You can do this with a mixinarrow-up-right:

In an HTML tag:


Try it in this CodePenarrow-up-right.

If you are using an autoprefixerarrow-up-right you can remove other prefixes.

Browser compatibility herearrow-up-right.

Sharearrow-up-rightFollowedited Jul 6, 2022 at 15:38arrow-up-rightanswered Oct 11, 2019 at 10:27Alessandro_Russo's user avatararrow-up-rightAlessandro_Russoarrow-up-right1,7292121 silver badges3232 bronze badgesAdd a commentarrow-up-right52

For those who have trouble achieving the same in the Android browser with the touch event, use:

Sharearrow-up-rightFollowedited Nov 24, 2019 at 13:37arrow-up-rightPeter Mortensen's user avatararrow-up-rightPeter Mortensenarrow-up-right30.8k2121 gold badges105105 silver badges131131 bronze badgesanswered May 19, 2014 at 5:30Beep.exe's user avatararrow-up-rightBeep.exearrow-up-right1,3681212 silver badges2121 bronze badgesAdd a commentarrow-up-right49

If you are using Lessarrow-up-right and Bootstraparrow-up-right you could write:

Sharearrow-up-rightFollowedited Apr 17, 2016 at 5:09arrow-up-rightPeter Mortensen's user avatararrow-up-rightPeter Mortensenarrow-up-right30.8k2121 gold badges105105 silver badges131131 bronze badgesanswered Apr 18, 2012 at 8:34Codler's user avatararrow-up-rightCodlerarrow-up-right10.9k66 gold badges5252 silver badges6565 bronze badgesAdd a commentarrow-up-right49

Sharearrow-up-rightFollowedited Nov 24, 2019 at 13:09arrow-up-rightPeter Mortensen's user avatararrow-up-rightPeter Mortensenarrow-up-right30.8k2121 gold badges105105 silver badges131131 bronze badgesanswered Oct 26, 2012 at 5:44Gaurang's user avatararrow-up-rightGaurangarrow-up-right1,9281818 silver badges1212 bronze badgesAdd a commentarrow-up-right39

Aside from the Mozilla-only property, no, there is no way to disable text selection with just standard CSS (as of now).

If you notice, Stack Overflow doesn't disable text selection for their navigation buttons, and I would recommend against doing so in most cases, since it modifies normal selection behavior and makes it conflict with a user's expectations.

Sharearrow-up-rightFollowanswered May 5, 2009 at 20:38hbw's user avatararrow-up-righthbwarrow-up-right15.5k66 gold badges5151 silver badges5858 bronze badges

  • While I agree that it changes behaviour the user expects, it would make sense for things like the "Add Comment" button that is sitting next to this form field ... – X-Istencearrow-up-right May 5, 2009 at 20:40arrow-up-right

  • But doesn't that expose needless implementation details? An input or button's text can't be selected. – anon May 5, 2009 at 20:40arrow-up-right

  • @anon: Most users will probably not try to select the text of your button, so in practice, it shouldn't really matter much. Besides, in order to do so, they will have to start selecting outside of the button—if they click inside the button itself, the onclick handler will activate instead. Plus, certain browsers (e.g. Safari) actually let you select the text of normal buttons… – hbwarrow-up-right May 5, 2009 at 20:49arrow-up-right

  • 8If you're selecting a set of comments from a chat thread and each comment has an upvote/downvote button next to it, then it would be nice to select the text without the other stuff. That's what the user expects or wants. He doesn't want to copy/paste the button labels with every comment. – Mnebuerquoarrow-up-right Aug 3, 2013 at 16:52arrow-up-right

  • 2And what if you for example double click a button which instead of redirecting you to another page opens a div? then the text for the button will be selected due to the double-click! – Gigalaarrow-up-right Jul 25, 2014 at 11:32arrow-up-right

Show 2 more commentsarrow-up-right37

This works in some browsers:

Simply add your desired elements/ids in front of the selectors separated by commas without spaces, like so:

The other answers are better; this should probably be seen as a last resort/catchall.

Sharearrow-up-rightFollowedited Apr 17, 2016 at 4:54arrow-up-rightPeter Mortensen's user avatararrow-up-rightPeter Mortensenarrow-up-right30.8k2121 gold badges105105 silver badges131131 bronze badgesanswered Apr 9, 2014 at 22:56r3wt's user avatararrow-up-rightr3wtarrow-up-right4,64322 gold badges3333 silver badges5555 bronze badges

Add a commentarrow-up-right37

Suppose there are two divs like this:

Run code snippetExpand snippet

Set cursor to default so that it will give a unselectable feel to the user.

Prefix need to be used to support it in all browsers. Without a prefix this may not work in all the answers.

Sharearrow-up-rightFollowedited Nov 2, 2019 at 14:24arrow-up-rightPeter Mortensen's user avatararrow-up-rightPeter Mortensenarrow-up-right30.8k2121 gold badges105105 silver badges131131 bronze badgesanswered Mar 28, 2016 at 9:42Gaurav Aggarwal's user avatararrow-up-rightGaurav Aggarwalarrow-up-right9,76966 gold badges3636 silver badges7474 bronze badgesAdd a commentarrow-up-right33

This will be useful if color selection is also not needed:

...all other browser fixes. It will work in Internet Explorer 9arrow-up-right or later.

Sharearrow-up-rightFollowedited Apr 17, 2016 at 5:01arrow-up-rightPeter Mortensen's user avatararrow-up-rightPeter Mortensenarrow-up-right30.8k2121 gold badges105105 silver badges131131 bronze badgesanswered Apr 3, 2013 at 8:31karthipan raj's user avatararrow-up-rightkarthipan rajarrow-up-right65711 gold badge88 silver badges1515 bronze badges

Add a commentarrow-up-right32

Add this to the first div in which you want to disable the selection for text:

Sharearrow-up-rightFollowedited Mar 10, 2013 at 19:58arrow-up-rightPeter Mortensen's user avatararrow-up-rightPeter Mortensenarrow-up-right30.8k2121 gold badges105105 silver badges131131 bronze badgesanswered Oct 30, 2012 at 6:56JIT1986's user avatararrow-up-rightJIT1986arrow-up-right68266 silver badges99 bronze badgesAdd a commentarrow-up-right30

NOTE:

The correct answer is correct in that it prevents you from being able to select the text. However, it does not prevent you from being able to copy the text, as I'll show with the next couple of screenshots (as of 7th Nov 2014).

Before we have selected anything
After we have selected
The numbers have been copied

As you can see, we were unable to select the numbers, but we were able to copy them.

Tested on: Ubuntuarrow-up-right, Google Chromearrow-up-right 38.0.2125.111.

Sharearrow-up-rightFollowedited Apr 17, 2016 at 4:52arrow-up-rightPeter Mortensen's user avatararrow-up-rightPeter Mortensenarrow-up-right30.8k2121 gold badges105105 silver badges131131 bronze badgesanswered Nov 7, 2014 at 13:22Luke Madhanga's user avatararrow-up-rightLuke Madhangaarrow-up-right6,79122 gold badges4343 silver badges4646 bronze badges

  • 1I've had the same problem. On Mac Chrome 48.0.2564.116 and on Mac Safari 9.0.3. Notably, Mac Firefox 43.0 doesn't copy the character, but sticks extra endlines between them. What should be done about this? – NHDalyarrow-up-right Mar 5, 2016 at 1:34arrow-up-right

Add a commentarrow-up-right28

It is easily done with:


Alternatively:

Let's say you have a <h1 id="example">Hello, World!</h1>. You will have to remove the innerHTML of that h1, in this case Hello, World. Then you will have to go to CSS and do this:

Now it simply thinks it is a block-element, and not text.

Sharearrow-up-rightFollowedited Nov 24, 2019 at 14:16arrow-up-rightPeter Mortensen's user avatararrow-up-rightPeter Mortensenarrow-up-right30.8k2121 gold badges105105 silver badges131131 bronze badgesanswered Nov 8, 2018 at 9:17codeWithMe's user avatararrow-up-rightcodeWithMearrow-up-right8521212 silver badges1717 bronze badgesAdd a commentarrow-up-right27

To get the result I needed, I found I had to use both ::selection and user-select

Sharearrow-up-rightFollowedited Nov 24, 2019 at 13:46arrow-up-rightPeter Mortensen's user avatararrow-up-rightPeter Mortensenarrow-up-right30.8k2121 gold badges105105 silver badges131131 bronze badgesanswered May 14, 2015 at 0:13SemanticZen's user avatararrow-up-rightSemanticZenarrow-up-right1,1411414 silver badges2121 bronze badgesAdd a commentarrow-up-right23

This is not CSS, but it is worth a mention:

jQuery UI Disable Selectionarrow-up-right:

Sharearrow-up-rightFollowanswered Apr 9, 2013 at 16:42Automatico's user avatararrow-up-rightAutomaticoarrow-up-right12.4k99 gold badges8181 silver badges110110 bronze badgesAdd a commentarrow-up-right21

Check my solution without JavaScript:

jsFiddlearrow-up-right

Run code snippetExpand snippet

Popup menu with my technique applied: http://jsfiddle.net/y4Lac/2/arrow-up-right

Sharearrow-up-rightFollowedited Apr 17, 2016 at 5:00arrow-up-rightPeter Mortensen's user avatararrow-up-rightPeter Mortensenarrow-up-right30.8k2121 gold badges105105 silver badges131131 bronze badgesanswered Feb 22, 2014 at 22:06apocalypse's user avatararrow-up-rightapocalypsearrow-up-right5,75499 gold badges4747 silver badges9494 bronze badgesAdd a commentarrow-up-right21

I have learned from the CSS-Tricksarrow-up-right website.

And this also:

Sharearrow-up-rightFollowedited Nov 24, 2019 at 13:51arrow-up-rightPeter Mortensen's user avatararrow-up-rightPeter Mortensenarrow-up-right30.8k2121 gold badges105105 silver badges131131 bronze badgesanswered Apr 1, 2016 at 11:16Mohammed Javed's user avatararrow-up-rightMohammed Javedarrow-up-right86622 gold badges99 silver badges2424 bronze badges

Add a commentarrow-up-right21

FIRST METHOD: ( TOTALLY NONSENSE ):

Snippet:

Run code snippetExpand snippet

SECOND METHOD ( NO NONSENSE INCLUDED )

Snippet:

Run code snippetExpand snippet

First, solve the problem. Then, write the code.

John Johnson

Sharearrow-up-rightFollowedited Jan 14, 2022 at 15:50arrow-up-rightcommunity wiki 3 revs arrow-up-rightRixTheTyruntarrow-up-rightAdd a commentarrow-up-right12arrow-up-rightNextarrow-up-rightHighly active questionarrow-up-right. Earn 10 reputation (not counting the association bonusarrow-up-right) in order to answer this question. The reputation requirement helps protect this question from spam and non-answer activity.

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.

Watch a courseWatch a video course JavaScript - The Complete Guide (Beginner + Advanced)arrow-up-right

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

Try it Yourself »arrow-up-rightIf you need to disable text selection for the whole page, apply the user-select to the <body>arrow-up-right element.

How to Disable Text Selection with JavaScript

Apply the onmousedown and onselectstart Eventsarrow-up-right to the <body>arrow-up-right or <div>arrow-up-right tags to prevent text selection and copy/cut on your website. It override the default behavior of the browsers.

Example

Try it Yourself »arrow-up-right

How to Disable Copy, Cut, and Paste with JavaScript/jQuery.

You can allow text selection, but prevent copy and cut functions using the oncopy, oncut and onpaste event attributesarrow-up-right. By adding these attributes into a textbox’s <input>arrow-up-right tag, you can disable cut, copy and paste features. The user is left with the option to enter the field manually with these attributes set.

Example

Try it Yourself »arrow-up-right

The same effect can be achieved by using the jQuery bind() function specifying cut and copy events that are fired when the user cuts or copies a text.

Example

Try it Yourself »arrow-up-right

How to Disable Right-click with JavaScript/jQuery

To disable right-click on you page, you need to add the oncontextmenu event and "return false" in the event handler. It will block all the access to the context menu from mouse right-click.

Use the bind() jQuery function to disable the right-click feature.This method disables the right-click (context menu) feature on a text field, and also alerts the user with a popup message.

Example

Try it Yourself »arrow-up-rightRemember that it is not possible to prevent text extraction in your document in any way (100 percent secure), for there are many ways to retrieve a website's content, i.e., the Browser Developers Console.

Last updated