I want to create an element within a table which is not copyable (because of better readability).
In Firefox it is working correctly. If you select everything and copy it, the specific text element is not beeing copied.
Sadly in Chrome this doesn't work. Indeed the browser does not select the text, but copies it.
<td unselectable="on" id="unselectable">Test2</td>
#unselectable {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
Example: http://jsfiddle.net/pXAeB/
Is there a solution to this problem?
Demo Fiddle
Add the below to your table element:
unselectable='on'
onselectstart='return false;'
onmousedown='return false;'
To your table element. Note that for Chrome, most of the time just the inclusion of onselectstart='return false;' should suffice.
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.
In kogrid I cannot select any text in the grid. You can see this here in their examples
http://ericmbarnard.github.com/KoGrid/#/examples
Is there anyway I can make it be able to select the text in a cell?
This is probably because of the default kogrid.css having this section
.kgNoSelect{
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
Fork the code, and remove this definition, and you should be able to select the text.
It is builded with Knockoutjs, so there is an Observable of the text you need to select, I'm sure.
I don't know this KO Grid, but knowing KO what you need to do is just to see which one is the ko.observable() you need and create a custom function for your purposes.
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;
}
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>