I know one can use the below CSS to disable user text selection.
.unselectable{
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
But when I have the following html:
<p>selectable text 1</p>
<p class="unselectable">unselectable text</p>
<p>selectable text 2</p>
Users can still copy the unselectable text by selecting from the very top of the page (selectable text 1) to the very bottom of the page (selectable text 2). Any ways to prevent that? Thanks.
Questions seems vague.
There is a difference between "Selection" and "Copying" on HTML pages.You can prevent "Selection" using CSS, but you can not prevent "Copying" using CSS. You need JS for that.
You just give it a div wrapper and define the id selector to do what you want Correct way to do a css wrapper
Related
I want to disable selecting text for all elements which a user cannot edit, for example text or images, but I still want to keep it for elements that you can type inside, like inputs or textareas.
To disable text selection, I use the following:
* {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
But as I said, this effects all elements, so I tried using this selector:
*[contenteditable=false]
instead of just *
But this doesn't work apparently for some reason, is there any selector in CSS to detect content-editable elements?
You are using an attribute selector, which will select on the presence of the contenteditable attribute.
What you are actually looking for is a way to not select elements which accept input, for which there is no shared selector. You would have to use :not and list all such tags (and possibly include the contenteditable attribute selector).
*:not(input):not(textarea):not([contenteditable=""]):not([contenteditable="true"]) {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
<input value="input" />
<hr />
<textarea>textarea</textarea>
<hr />
<p>paragraph</p>
<hr />
<p contenteditable>paragraph editable</p>
I need to identify clicked word (onclick on any word in the screen I should detect that word) I'm able to get it using jQuery. I want to exclude clicking for white space.
i.e in the above, when I click anywhere between word "together" and down arrow its selecting word together but my requirement is nothing to be selected in this scenario.
I'm using https://github.com/megahertz/jquery.get-word-by-event library for word tapping.
Using CSS you can disable the text select in the html document. So which text you want, not to be selected keep it in the div-tag and then implement the below CSS style object to the div-tag:
div{
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
Hope this solves your problem.
Additional Changes with respect to below comment:
body{
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
Implementing this css on body disables all the text or any other HTML object from being selected.
You can use the following after clicking. As in after clicking pass the work through the following
function hasWhiteSpace(s) {
return /\s/g.test(s);
}
You can easily find out whether the selection is blank or has words. This would return if the white space is only selected else false.
I have some source code in a <pre><code> with line numbers in a separate <div>. When the text is selected, the line numbers come with it, and are subsequently copied. Is there any way to prevent the line numbers from being a part of the selection, even if I select the elements above and below the source code block?
I'd like to avoid JavaScript for the benefit of people who browse with it off. (With JavaScript, I'd add a button to hide the line numbers).
unselectable="on" and the various vendor-specific user-select CSS properties did not work; the numbers are still selected and copied.
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;
}
I'm trying to stop my <div>'s text from highlighting when I click on it multiple time (it's a button). I know that there is a solution but I just don't know it. This is a simple and easy question to answer.
<div id="Button01">Time?</div>
And yes, I know it's a stupid question to ask...
when it's a div it can't be a button. When you click some text multiple times is a standard behaviour the text gets highlighted.
There is some code I found on SO
div{
-moz-user-select: none;
-khtml-user-select: none;
-webkit-user-select: none;
user-select: none;
}
Here an example text
Label: Some-text-here
How can i have it so when i triple click the line it tries to highlight only is Some-text-here rather then the full line? I could swear i seen it done before with css i just cant think of a way
<span style="float:left">Label</span><span style="float:left">Some-text-here</span>
JsFiddle.
If you use floats to position the texts next to each other they'll still be considered separate paragraphs and achieve the desired result.
<html>
<body>
<div style="float:left">Label:</div>
<div style="float:left">some text here</div>
</body>
</html>
This is somewhat of an extension to AXO's answer, but the perfect CSS rule would be user-select: contain;, which will prevent selections from crossing the element boundary. This value, however, is only supported in IE/Edge.
An interesting property though of user-select: all; and user-select: none; is that all will highlight the entire element with a single click, and all can be put inside none, creating a similar effect to contain if you put user-select: all; on the desired element within a parent element with user-select: none;. This is especially useful if you also have bare text in between the elements which you want to prevent being selected, but note that with this solution, the selection can still expand beyond the parent element, skipping over it, so it's not truly containing the selection.
Example:
.unselectable {
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
}
.selectall {
-moz-user-select: all;
-webkit-user-select: all;
-ms-user-select: all;
}
<p class="unselectable">Some extra text: <span class="selectall">ID-12345_678</span></p>
In some situations it may also be appropriate to exempt some parts of text from selection. The experimental user-select style can be used for that purpose, like so:
.unselectable {
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
}
<span class='unselectable'>Label: </span>some text here
The simplest and most compatible approach that responds to single, double and triple clicks as expected is on the snippet below. See more here: user-select - CSS: Cascading Style Sheets | MDN
<span style="user-select: none">Label: </span><span style="user-select: text">Some-text-here</span>