How to make certain text not selectable with CSS
The CSS below stops users from being able to select text.
-webkit-user-select: none; /* Safari */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* IE10+/Edge */
user-select: none; /* Standard */
To target IE9 downwards the html attribute unselectable
must be used instead:
<p unselectable="on">Test Text</p>
How to make HTML Text unselectable
You can't do this with plain vanilla HTML, so JSF can't do much for you here as well.
If you're targeting decent browsers only, then just make use of CSS3:
.unselectable {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
<label class="unselectable">Unselectable label</label>
If you'd like to cover older browsers as well, then consider this JavaScript fallback:
<!doctype html>
<html lang="en">
<head>
<title>SO question 2310734</title>
<script>
window.onload = function() {
var labels = document.getElementsByTagName('label');
for (var i = 0; i < labels.length; i++) {
disableSelection(labels[i]);
}
};
function disableSelection(element) {
if (typeof element.onselectstart != 'undefined') {
element.onselectstart = function() { return false; };
} else if (typeof element.style.MozUserSelect != 'undefined') {
element.style.MozUserSelect = 'none';
} else {
element.onmousedown = function() { return false; };
}
}
</script>
</head>
<body>
<label>Try to select this</label>
</body>
</html>
If you're already using jQuery, then here's another example which adds a new function disableSelection()
to jQuery so that you can use it anywhere in your jQuery code:
<!doctype html>
<html lang="en">
<head>
<title>SO question 2310734 with jQuery</title>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
$.fn.extend({
disableSelection: function() {
this.each(function() {
if (typeof this.onselectstart != 'undefined') {
this.onselectstart = function() { return false; };
} else if (typeof this.style.MozUserSelect != 'undefined') {
this.style.MozUserSelect = 'none';
} else {
this.onmousedown = function() { return false; };
}
});
}
});
$(document).ready(function() {
$('label').disableSelection();
});
</script>
</head>
<body>
<label>Try to select this</label>
</body>
</html>
Is there a way to make text unselectable on an HTML page?
In most browsers, this can be achieved using CSS:
*.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"));
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;
}
make html text unselectable
After reviewing this problem, Came to mind another method to prevent the user from selecting text while viewing the page, basically, setting up a mask over the target text:
Your Fiddle updated here!
Example:
CSS
.wrapTxt {
position: relative;
}
.wrapTxt .mask {
display: block;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
HTML
<p class="wrapTxt">
This is my text! My text is mine and no one Else's!
<span class="mask"></span>
</p>
The principle here is simple (Fiddle), have a block element over the text, occupying all of it's wrapper space.
The downfall is a hard implementation if you need one line to be selectable and the next one not. Also, links on the "not selectable" text will not me available.
Final note:
The user can always go around this, either by looking at the source code, or by dragging the mouse from top to bottom of the webpage.
Making text unselectable
It varies per browser. These CSS properties will target WebKit and Gecko-based browsers, as well as any future browsers that support user-select
:
user-select: none;
-webkit-user-select: none;
-moz-user-select: none;
How to make HTML Text unselectable for inputs
I was able to achieve this by using a JS approach
It looks kinda dirty, but it will work for now. I will refactor it in a few days, but if someone wants to see the answer:
var digitalCodeElement = this.elementRef.nativeElement.querySelector('.digital-code');
digitalCodeElement.addEventListener('contextmenu', e => e.preventDefault());
digitalCodeElement.addEventListener('copy', e => e.preventDefault());
digitalCodeElement.addEventListener('paste', e => e.preventDefault());
digitalCodeElement.addEventListener('cut', e => e.preventDefault());
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>
Related Topics
Two Column Layout with One Having a Fixed Width in CSS
How to Create a Squeezed Box Using Only CSS
How to Add Tableview Footer in Javafx Tableview
Mime Type Error When Adding a CSS File to Angular
Change Ie Background Color on Unopened, Focused Select Box
Reset Angle of Text in Skewed Div Using CSS
How to Add Zig Zag Border to a Box Contains Background Image
CSS Animation on Hover Stay at Last Keyframe When Using Transform: Rotate
Border-Radius with Border-Image
How to Make Chosen Select Go Over Parent Div
CSS Transform + CSS Transition = Skipped Frames [Google Chrome]
How to Create Cube Window with CSS
How to Set the Transform Origin to a Specific Point on the Element
Want to Make the Whole Page in Grayscale Except Specified Div
Prefer Shrinking Over Growing in a Flex Container with Flex-Flow: Row Wrap
CSS Drop Down Navigation, 3Rd Level Issue