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
Related
Does anyone know of a way to make an 'fa-image' not draggable and not selectable, at the same time?
I have this surface displayed in 'fa-container-surface' and want to disable image selection because of scroll and drag and drop doesn't work if popup appear to save image.
<fa-image-surface fa-image-url="{{tile.image}}"
fa-size="[60, 40]"
class="hexagon-tile-img unselectable">
</fa-image-surface>
I tried to set this css :
.unselectable {
/* For Opera and <= IE9, we need to add unselectable="on" attribute onto each element */
/* Check this site for more details: http://help.dottoro.com/lhwdpnva.php */
-moz-user-select: none; /* These user-select properties are inheritable, used to prevent text selection */
-webkit-user-select: none;
-ms-user-select: none; /* From IE10 only */
user-select: none; /* Not valid CSS yet, as of July 2012 */
-webkit-user-drag: none; /* Prevents dragging of images/divs etc */
user-drag: none;
}
But this doesn't work on chrome 38 webbrowser or Windows Phone 8.1 browser. Image disappear because of next error:
Syntax Error: Token 'unselectable' is an unexpected token at column 18 of the expression [hexagon-tile-img unselectable] starting at [unselectable]
In HTML, I know that we can set "unselectable='on'" or "draggable='false'" on 'img', but if I try to do it on 'fa-image-surface' attributes are not considered.
Does anyone have an idea to do it in famo.us/Angular project?
The only CSS class that's being applied to your hexagon-tile-img- try adding unselectable to the class attribute, just to test that it will work correctly on img elements.
In your stylesheet, you could try using .unselectable > img to basically apply the unelectable rules to the child img elements in your container.
Also, don't expect famo.us to work on IE at the moment as IE hasn't implemented preserve-3d, which is vital to applying 3d transforms to child elements.
It seems that the contenteditable attribute (which worked fine on iOS6) has stopped working on iOS7 webkit. Though the browser seems to recognize the field as editable, and brings up the keyboard, any input seems to close it, or it fails to register. Any encounter the same problem, or have any workarounds?
You can try it out over here - http://html5demos.com/contenteditable
Thanks!
I ran into this problem today. The solution for me was to set user-select to "text" in the CSS for any editable elements:
* {
-webkit-user-select: none;
user-select: none;
}
input,
textarea,
[contenteditable] {
-webkit-user-select: text;
user-select: text;
}
I was having the same issue and the below link helped me resolve it.
https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariCSSRef/Articles/StandardCSSProperties.html#//apple_ref/doc/uid/TP30001266-SW1
The solution that worked for me was to set "-webkit-user-modify" property to "read-write" for any editable element (you have defined as contenteditable)
*{
-webkit-user-modify:read-write;
}
In my .net project ,these are so many codes like this
< asp:TextBox ID="txtDeparment" runat="server" contentEditable="false">< /asp:TextBox>
it works well In IE,but in Chrome, it doesn't work. but you cann't simply replace it by ReadOnly.
How can I resolve this problem in minimum changes?
In order to make a text box un-editable you should use the following CSS attributes:
user-select: none;
-webkit-user-select: none;
-moz-user-select: none;
These CSS attributes don't allow selecting the element, which in the case of an input field, also denies editing it.
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.
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; }