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;
}
Related
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 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
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 am trying to write a selector like this, but to no success:
.something::after::selection
Basically I am already using ::after to inject some content, namely an image. But I want to prevent the user from being able to "select" this image and get an ugly blue back-shadow.
Normally I can prevent this with the following:
.something::selection
{
background-color: transparent;
}
But it does not seem to combine well with ::after.
Has anyone tried this before or have a solution?
No, in firefox I'm 100% sure that you can't change that effect on selected images, is system-specific, and not customizable yet
*edited
To prevent images to be selected you can use following css:
img {
-o-user-select: none;
-moz-user-select: none;
-webkit-user-select: none;
user-select: none;
}
Also see the updated jsfiddle.
With ::after see this jsfiddle.
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>