Prevent selection in HTML
The proprietary variations of user-select
will work in most modern browsers:
*.unselectable {
-moz-user-select: -moz-none;
-khtml-user-select: none;
-webkit-user-select: none;
/*
Introduced in IE 10.
See http://ie.microsoft.com/testdrive/HTML5/msUserSelect/
*/
-ms-user-select: none;
user-select: none;
}
For IE < 10 and Opera, 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:
<div id="foo" unselectable="on" class="unselectable">...</div>
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:
function makeUnselectable(node) {
if (node.nodeType == 1) {
node.setAttribute("unselectable", "on");
}
var child = node.firstChild;
while (child) {
makeUnselectable(child);
child = child.nextSibling;
}
}
makeUnselectable(document.getElementById("foo"));
How do I disable text selection with CSS or JavaScript?
<div
style="-moz-user-select: none; -webkit-user-select: none; -ms-user-select:none; user-select:none;-o-user-select:none;"
unselectable="on"
onselectstart="return false;"
onmousedown="return false;">
Blabla
</div>
How to disable selection of text on a web page
Disable selection of every element with CSS
body {
-webkit-user-select: none;
-moz-user-select: -moz-none;
-ms-user-select: none;
user-select: none;
}
This is supported by Chrome, Safari, Firefox, IE 10, and iOS Devices. More info on MDN page.
Edit: If you want <input>
and <textarea>
to remain selectable in Firefox, add:
input,
textarea {
-moz-user-select: text;
}
Disable context menu with jQuery
$(document).on("contextmenu", function (event) { event.preventDefault(); });
Prevent element from taking part in text selection
Give the element you want to prevent selection of an id.
Then put this in your CSS:
#id-name {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
::-moz-selection {
background: transparent;
}
::selection {
background: transparent;
}
How can I prevent the selection of text in IE?
You can use Javascript and do:
document.onselectstart = function() { return false; }
document.onmousedown = function() { return false; }
The first one works for IE and the second one does Mozilla-based browsers.
How to disable select for html5 canvas element
You could try applying a few CSS rules along these:
user-select: none;
-webkit-user-select: none;
-moz-user-select: none;
As Michael mentioned jQuery's disableTextSelect is worth checking out. Even if you don't end up using it, studying the source might give some insight.
CSS disable text selection
Don't apply these properties to the whole body. Move them to a class and apply that class to the elements you want to disable select:
.disable-select {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
Preventing images and text to be selected
Add this to your style sheet
.selectDisable {
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-o-user-select: none;
user-select: none;
}
.selectEnable {
-webkit-user-select: text;
-khtml-user-select: text;
-moz-user-select: text;
-o-user-select: text;
user-select: text;
}
Just add the class selectDisable
to the element you want to prevent from being selected.
The drag effect occurs on webkit(chrome, safari, opera). It does not happen on Firefox.
Don't this apply to your whole document if you have textual content because then you won't be able to select text, which is not very user-friendly.
You could also prevent dragging by adding another empty div
on top of your image with the same selectDisable
class.
Here is a working example:
http://jsfiddle.net/xugy6shd/3/
Related Topics
Make React Useeffect Hook Not Run on Initial Render
Sharing a Variable Between Multiple HTML Pages
How to Save Image from Canvas with CSS Filters
How to Find the Width of a Div Using Vanilla JavaScript
Refresh a Div That Has a Google Ad Inside It
Adding Multiple Event Listeners to One Element
How to Open a New Window and Insert HTML into It Using Jquery
How to Sort Elements by Numerical Value of Data Attribute
How to Manually Trigger Validation with Jquery Validate
JavaScript Onclick Event Over Flash Object
Keycode on Android Is Always 229
How to Get a HTML Element from a String with Jquery
How to Access the Contents of an Svg File in an <Img> Element
How to Get the HTML for a Dom Element in JavaScript
How to Maintain a Websockets Connection Between Pages