I need to select all nodes in an HTML document using the DOM selection API getSelection.
Nodes that are not selectable by the user (i.e. with mouse) should be excluded.
So, if an element has the CSS rule user-select: none or -moz-user-select: none applied to it, my programmatical selection should exclude those elements.
If I select text manually (via mouse) those elements won't be selected. If I apply window.getSelection().selectAllChildrenon one of its parent elements the non-selectable element is getting selected as well.
I tried different methods both of the Selection and the Range objects, but haven't found a way to only select those elements programmatically that are selectable manually.
<body>
<div>Selectable</div>
<div style="-moz-user-select:none">
<span id="span">Non-Selectable</span>
</div>
<script>
const sel = window.getSelection();
sel.selectAllChildren(document.body);
console.log(sel.containsNode(document.getElementById('span')));
// outputs true
</script>
</body>
Does anyone know a way to programmatically select only those elements that are selectable manually?
EDIT So what I need is a function that receives a node as argument and returns a Boolean on wether this node is selectable:
function isSelectable(node) {
// determine if node is selectable
}
Possibly something like this:
var userselect = [
'-webkit-touch-callout', /* iOS Safari */
'-webkit-user-select', /* Safari */
'-khtml-user-select', /* Konqueror HTML */
'-moz-user-select', /* Firefox */
'-ms-user-select', /* Internet Explorer/Edge */
'user-select'
];
function isSelectable(element) {
var style = getComputedStyle(element);
var canSelect = !userselect.some(key => style[key] === 'none');
if(canSelect) {
if(element.parentElement) return isSelectable(element.parentElement);
return true;
}
return false;
}
Basically, if this element or any of its ancestors are non-select-able then this element is non-select-able. We check this element and then use recursion to check the ancestor elements, stopping either when we run out of ancestors or when we find one that is set non-select-able.
My assumption on how user-select works could be wrong; It might be possible to force an inner element to be select-able even after setting an ancestor non-select-able. The logic could be re-organized to be less confusing. It's certainly possible to remove recursion, using a loop instead. The userselect array could use some intelligence; If this is for an extension, you can use that to inform which attributes you need to check for. This code expects an Element rather than a Node. I haven't actually tested this code but it seems like it should work.
Well, as I suspected your code is partially good (99% good) and that is because of different browsers, combining your script and link that I've already sent you I manage this:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<style>
.noselect {
-webkit-touch-callout: none; /* iOS Safari */
-webkit-user-select: none; /* Safari */
-khtml-user-select: none; /* Konqueror HTML */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* Internet Explorer/Edge */
user-select: none; /* Non-prefixed version, currently
supported by Chrome and Opera */
}
</style>
</head>
<body>
<div>Selectable</div>
<div class="noselect">
<span id="span">Non-Selectable</span>
</div>
<div id="r">
</div>
<script>
window.onload = function() {
var sel = window.getSelection();
sel.selectAllChildren(document.body);
document.getElementById('r').innerHTML = sel.containsNode(document.getElementById('span'));
// outputs true
};
</script>
</body>
</html>
When you run it here you will see that it works! I mean -moz-user-select: none; only works in firefox...
After saying that I've checked other browsers too (IE, Firefox, Chrome and Edge) and this here only works in Chrome.
Here is a possible way without having to loop thru the node's ancestors:
function isSelectable(textNode) {
const selection = getSelection();
selection.selectAllChildren(textNode.parentNode);
const selectable = !!selection.toString();
selection.collapseToStart();
return selectable;
}
Explanation:
If a node is not user-selectable you can still select it programmatically (selectAllChildren), but toString() won't include the node's text content anyway.
In my case I need to iterate over all text nodes of document.body and unfortunately this solution is still too slow for my purpose.
Is there anyway where we can dropdown a menu or anything without reloading page on Opera Mini? I know how to dropdown a menu by reloading page with :target CSS but i am looking for a solution where page doesn't reload. I have seen certain websites do that.
At times, I feel Opera Mini is the new IE8. I am looking not to use any libraries like jquery and have zero dependencies.
I'm fairly sure you can't do it with JavaScript, given that the JavaScript doesn't run on the device, it runs on the Opera Mini server.
There's the old CSS checkbox trick, though; it's relatively basic, but that doesn't mean Opera Mini may not mess it up anyway. The way it works is you have a label connected to a hidden checkbox. Clicking the label toggles the checkbox. You use an adjacent sibling combinator and the :checked pseudo-class to show another element only when the checkbox is checked:
label {
cursor: pointer;
}
/* hide the checkbox */
.hidden-cb {
display: none;
}
/* By default, this is not shown */
.show-on-checkbox {
display: none;
}
/* But if it's immediately after a checked checkbox, we show it */
input:checked + .show-on-checkbox {
display: block;
}
<label for="hidden-cb">Click me</label>
<input type="checkbox" id="hidden-cb" class="hidden-cb">
<div class="show-on-checkbox" id="target">Hey, here I am!</div>
It doesn't have to be just a simple appear/disappear thing, you can do anything CSS allows that Opera Mini supports.
I was about to suggest the :hover trick as an alternative, but on Opera Mini, 99% of your users will be using their fingers...
I want to prevent selection for a particular html element, so tried applying the "user-select" CSS property to make this happen across all the browsers. something like below.
.section1{
-webkit-user-select: none; /* Chrome all / Safari all */
-moz-user-select: none; /* Firefox all */
-ms-user-select: none; /* IE 10+ */
user-select: none; /* Likely future */
}
This works fine when I applied "user-select" CSS property as "none" for all the "sections div". But when the section (section2) in between the top (section1) and the bottom (section3) doesn't have the property applied, and selection is happening when the selection starts from either from section1(top) or section2(bottom) and extends till section 2(midddle).
This issue happens only in IE and the same works fine in Chrome and Firefox.
Enclosed JSFiddle link for the same.
https://jsfiddle.net/Thirunavukkarasu/bwf5emvp/
For IE < 10 (also IE10 if user-select not working ) 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="Div1" unselectable="on" class="unselectable">...</div>
Java Script :
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("Div1"));
I am building a menu in HTML/CSS/JS and I need a way to prevent the text in the menu from being highlighted when double-clicked on. I need a way to pass the id's of several divs into a function and have highlighting turned off within them.
So when the user accidentally (or on purpose) double clicks on the menu, the menu shows its sub-elements but its text does not highlight.
There are a number of scripts out there floating around on the web, but many seem outdated. What's the best way?
In (Mozilla, Firefox, Camino, Safari, Google Chrome) you can use this:
div.noSelect {
-moz-user-select: none; /* mozilla browsers */
-khtml-user-select: none; /* webkit browsers */
}
For IE there is no CSS option, but you can capture the ondragstart event, and return false;
Update
Browser support for this property has expanded since 2008.
div.noSelect {
-webkit-user-select: none; /* Safari */
-ms-user-select: none; /* IE 10 and IE 11 */
user-select: none; /* Standard syntax */
}
https://www.w3schools.com/csSref/css3_pr_user-select.php
You could use this CSS to simply hide the selection color (not supported by IE):
#id::-moz-selection {
background: transparent;
}
#id::selection {
background: transparent;
}
You could:
Give it ("it" being your text) a onclick event
First click sets a variable to the current time
Second click checks to see if that variable is x time from the current, current time (so a double click over, for example, 500ms, doesn't register as a double click)
If it is a double click, do something to the page like adding hidden HTML, doing document.focus(). You'll have to experiment with these as some might cause unwanted scrolling.
Hope this is what you are looking for.
<script type="text/javascript">
function clearSelection() {
var sel;
if (document.selection && document.selection.empty) {
document.selection.empty();
} else if (window.getSelection) {
sel = window.getSelection();
if (sel && sel.removeAllRanges)
sel.removeAllRanges();
}
}
</script>
<div ondblclick="clearSelection()">Some text goes here.</div>
This question already has answers here:
How to disable text selection highlighting
(45 answers)
Closed 9 years ago.
I'm building an HTML UI with some text elements, such as tab names, which look bad when selected. Unfortunately, it's very easy for a user to double-click a tab name, which selects it by default in many browsers.
I might be able to solve this with a JavaScript trick (I'd like to see those answers, too) -- but I'm really hoping there's something in CSS/HTML directly that works across all browsers.
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"));
<script type="text/javascript">
/***********************************************
* Disable Text Selection script- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/
function disableSelection(target){
if (typeof target.onselectstart!="undefined") //IE route
target.onselectstart=function(){return false}
else if (typeof target.style.MozUserSelect!="undefined") //Firefox route
target.style.MozUserSelect="none"
else //All other route (ie: Opera)
target.onmousedown=function(){return false}
target.style.cursor = "default"
}
//Sample usages
//disableSelection(document.body) //Disable text selection on entire body
//disableSelection(document.getElementById("mydiv")) //Disable text selection on element with id="mydiv"
</script>
EDIT
Code apparently comes from http://www.dynamicdrive.com
All of the correct CSS variations are:
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
Try this:
<div onselectstart="return false">some stuff</div>
Simple, but effective... works in current versions of all major browsers.
For Firefox you can apply the CSS declaration "-moz-user-select" to "none".
Check out their documentation, user-select.
It's a "preview" of the future "user-select" as they say, so maybe Opera or WebKit-based browsers will support that. I also recall finding something for Internet Explorer, but I don't remember what :).
Anyway, unless it's a specific situation where text-selecting makes some dynamic functionality fail, you shouldn't really override what users are expecting from a webpage, and that is being able to select any text they want.
I'm finding some level of success with the CSS described here http://www.quirksmode.org/css/selection.html:
::selection {
background-color: transparent;
}
It took care of most of the issues I was having with some ThemeRoller ul elements in an AIR application (WebKit engine). Still getting a small (approx. 15 x 15) patch of nothingness that gets selected, but half the page was being selected before.
Absolutely position divs over the text area with a z-index higher and give these divs a transparent GIF background graphic.
Note after a bit more thought - You'd need to have these 'covers' be linked so clicking on them would take you to where the tab was supposed to, which means you could/should do this with the anchor element set to display:box, width and height set as well as the transparent background image.
For an example of why it might be desirable to suppress selection, see SIMILE TImeline, which uses drag-and-drop to explore the timeline, during which accidental vertical mouse movement causes the labels to be highlighted unexpectedly, which looks weird.
For Safari, -khtml-user-select: none, just like Mozilla's -moz-user-select (or, in JavaScript, target.style.KhtmlUserSelect="none";).
"If your content is really interesting, then there is little you can
ultimately do to protect it"
That's true, but most copying, in my experience, has nothing to do with "ultimately" or geeks or determined plagiarists or anything like that. It's usually casual copying by clueless people, and even a simple, easily defeated protection (easily defeated by folks like us, that is) works quite well to stop them. They don't know anything about "view source" or caches or anything else... heck, they don't even know what a web browser is or that they're using one.
Here's a Sass mixin (scss) for those interested. Compass/CSS 3 doesn't seem to have a user-select mixin.
// #usage use within a rule
// ex. img {#include user-select(none);}
// #param assumed valid user-select value
#mixin user-select($value)
{
& {
-webkit-touch-callout: $value;
-webkit-user-select: $value;
-khtml-user-select: $value;
-moz-user-select: $value;
-ms-user-select: $value;
user-select: $value;
}
}
Though Compass would do it in a more robust way, i.e. only add support for vendors you've chosen.
If it looks bad you can use CSS to change the appearance of selected sections.
Any JavaScript or CSS method is easily circumvented with Firebug (like Flickr's case).
You can use the ::selection pseudo-element in CSS to alter the highlight color.
If the tabs are links and the dotted rectangle in active state is of concern, you can remove that too (consider usability of course).
There are many occasions when turning off selectability enhances the user experience.
For instance allowing the user to copy a block of text on the page without copying the text of any interface elements associated with it (that would become interspersed within the text being copied).
Images can be selected too.
There are limits to using JavaScript to deselect text, as it might happen even in places where you want to select. To ensure a rich and successful career, steer clear of all requirements that need ability to influence or manage the browser beyond the ordinary... unless, of course, they are paying you extremely well.
The following works in Firefox interestingly enough if I remove the write line it doesn't work.
Anyone have any insight why the write line is needed.
<script type="text/javascript">
document.write(".");
document.body.style.MozUserSelect='none';
</script>