I have a website where I want to disable users from selecting content EXCEPT for input areas. I currently have some CSS to disable user-select:
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-o-user-select: none;
user-select: none;
However, this does NOT cover Internet Explorer; thus, I need to implement some JavaScript:
<body onselectstart="return false;">
Through CSS and JavaScript, I can make all content unselectable across all popular browsers. BUT, this code also makes areas unselectable, which is a major case of poor usability. I use CSS to make input areas selectable:
-webkit-user-select: text;
-khtml-user-select: text;
-moz-user-select: text;
-o-user-select: text;
user-select: text;
.. and as you might have expected, this does not cover Internet Explorer, since I used JavaScript to disable all content from being selectable.
What can I do to make all content unselectable except for input areas?
Since the event is bubbling up to the body and not originating there, I think you can check the node name for the actual target node, and avoid returning false for events occurring on certain nodes:
<body onselectstart="if ((event.target || event.srcElement).nodeName !== 'INPUT') return false;">
Try this one: oncontextmenu="return false;"
Put that in your body tag, then use something like:
e.cancelBubble = true;
if (e.stopPropagation) e.stopPropagation();
in a javascript function for the input items you want selectable. That should stop the propagation of the event that would trigger the body tag.
You can add the proprietary IE attribute unselectable="on" to any element that you want to make unselectable in IE:
<p unselectable="on">I don't want IE users to easily select this text
for some reason.</p>
See Making things unselectable in IE for a more detailed explanation.
If doing this from javascript, be sure to use el.setAttribute("unselectable","on"). Just using el.unselectable="on" will not work.
Related
I have a label element which, along with its corresponding input type="file", also contains an img sandwiched between two span elements.
The input itself is declared as display:none, allowing the label to do the job of launching the File Upload box when any element inside it is clicked. This, of course, works swimmingly in every major browser except IE. In IE, clicking anywhere inside the label other than the img will launch the File Upload box, but clicking the img will not...
You can see this issue replicated by opening this fiddle in IE alongside any other browser.
Strangely, the issue can be isolated down to the presence of the form. For some reason when the form wrapper is removed the label functions correctly. I obviously can't use this as a solution though. Thoughts?
It is a known bug in IE you can see it in Microsoft Connect
To solve simply add pointer-events: none; to the <img>
It can cause some browsers to highlight the image when being clicked. To avoid that make the image unselectable.
The full solution is:
.selector-for-image {
pointer-events: none;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
See updated JSFiddle
If you visit this page on iOS, you will not be able to select any text. This page doesn't contain any javascript or selection blocking code, actually if you open it on desktop browser everything will work.
I'm trying to implement EPUB3 reader on iOS and this page was generated with WYSIWYG EPUB3 editor.
So the problem is: How can I enable selection on this page without changing it visual layout?
And really important thing is: I'm hoping for solution which can be automated. So that I can preprocess this html files before opening in my reader.
Update: Selection starts working only when zoomed to about 400%.
Here is a cross-browser list of styles for non-selectable text:
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: moz-none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
You can also set them to select text as well:
-webkit-touch-callout: default;
-webkit-user-select: text;
-khtml-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
-o-user-select: text;
user-select: text;
The -webkit-touch-callout property allows you to dictate what does or doesn’t happen when a user taps and holds on a link on iOS. The default value is default and tap-holding on a link brings up the link bubble dialog; by using the value of none, that bubble never comes up.
The -khtml prefix predates the -webkit prefix and provides support for Safari 2.0-
The -moz prefix is defined twice with the value none and the value -moz-none on purpose. Using -moz-none rather than none prevents elements and sub-elements from being selectable. However some older browsers like Netscape won’t recognize moz-none so it’s still necessary to define none for them.
The -o prefix isn't supported but I have come across recommendations to include it for future proofing and it doesn't hurt unless minification is critical.
Non-prefixed property should be last in line.
The computed height of #div8 is 0. Changing this to 100% fixes the issue for me.
drop
<meta charset="UTF-8" />
into the head
Do u try this please :
body {
zoom: 1;
margin: 0;
padding: 0;
width: 512px;
height: 768px;
-webkit-user-select: text; // THIS ALLOW SELECT TEXT ON IOS
}
-webkit-user-select, which are also value : "none", "all", "element"
If I have a div with the style overflow: hidden; I found that there are times when keyboard actions can cause the div to scroll anyway. And since there are no scrollbars, there is really no way to make the div go back to its original state. Is anything I should do in addition to specifying the style to prevent this?
For example when you select the L with the mouse (in the fiddle) and after that you press the down arrow key while holding down shift (i.e. expanding the selection).
http://jsfiddle.net/PeeHaa/H34mM/
Or another scenario is when there is a textarea in the div: http://jsfiddle.net/h6Bhb/1/
A simple solution would be to disable text-select in the relevant element. Therefor preventing the possibility to use the arrow keys to select more..
To prevent tekst select you need to event.preventDefault() in the mousedown event with JS.
For your fiddle that could look like this in modern standards compliant browsers:
// give the div an id
document.getElementById('div').addEventListener('mousedown', function(e) {
e.preventDefault();
}, false);
Edit
Or as #JimThomas pointed out in the comments you can disable text select using CSS, ofcourse this doesn't enjoy as much support as the JS solution.
How to disable text selection highlighting using CSS?
I couldn't think of a more graceful or more complete (this doesn't solve problems you might have with inputs) solution, and I'm not sure if there even is one...
Add this to your div CSS:
-moz-user-select: -moz-none;
-khtml-user-select: none;
-webkit-user-select: none;
-ms-user-select: none; /* IE10+ */
user-select: none;
Does not work in < IE10 or Textarea, but I don't believe anything will prevent the textarea scenario unless you disable the textarea itself to prevent selection.
... or go with JS solution.
I require one HTML element (Label) on my page to be unselectable for IE ... currently I have tried
Unselectable=on
onselectreturn=false;
none of which is helping me out.
For Firefox and Chrome i have set the following CSS property which are working absolutely fine ... but the problem as always with the IE.
CSS properties you have set:
-moz-user-select: -moz-none;
-khtml-user-select: none;
-webkit-user-select: none;
-o-user-select: none;
user-select: none;
is there any alternative or IE-hack?
An answer on Stack Overflow has helped me out but not for IE.
<label unselectable="on"> should work for IE in the HTML. If applying it from javascript you MUST use setAttribute: labelEl.setAttribute("unselectable","on"). labelEl.unselectable = "on" does not work (tested in IE9).
Note that the "unselectable" attribute only affects text directly inside the element, not within its children - you need to set unselectable on them also, if that's the effect you want.
In IE8 there are two ways to make an element unselectable:
1.) myElement.unselectable = "on"; // Does not work on body elements
2.) myElement.onselectstart = function (){ return false; }
Once an element is unselectable, users cannot select from within that element.
However, they are still able to select either the text or the box of the element
by dragging into it from within another element which is not unselectable.
I have tried to work around this by cancelling various events on myElement (ondragenter, oncontrolselect, onmouseenter, onselectionchange...), it didn't work.
All this applies only to IE8
Set unselectable to off and it should work.
<label unselectable="off">Something</label>
http://jsfiddle.net/sWguE/1/
This also works for me
<label onselect="return false">Something</label>
http://jsfiddle.net/sWguE/3/
I need to prevent users from selecting elements in my web app UI, except for text in input fields and textareas. For Firefox, the technique seems to be to use this css:
* { -moz-user-select: none; }
And that works well enough (tested Firefox 3.5.2), except that you cannot then select within input fields or textareas.
I tried dividing it into
div,td,span,img { -moz-user-select: none; }
input,textarea { -moz-user-select: text; }
however, if the input field is inside of a div, td, or span, it is not selectable. It seems that the -moz-user-select property is applied to all children as well, no matter if those children override the setting. Does anyone know a way around this aside from setting this at a far more granular (and annoying) level for specific elements?
NOTE this is not for security purposes. I am fine having users view source or advanced users turning this off. But for web UI's with drag-and-drop functionality, or just those that are supposed to behave like an application in general rather than like a document, it is really weird to be able to accidentally select text. And it happens often for most users.
* { -moz-user-select: -moz-none; }
input,textarea { -moz-user-select: text; }
You are fighting a lost cause. If I really want to select text from your page, or get it in some way, I will.
However, on to your question. Try adding !important to the end, so it looks like this:
div,td,span,img { -moz-user-select: none; }
input,textarea { -moz-user-select: text !important; }