1

I want to prevent selection for a particular html element, so tried applying the "user-select" CSS property to make this happen across all the browsers. something like below.

    .section1{
      -webkit-user-select: none;  /* Chrome all / Safari all */
      -moz-user-select: none;     /* Firefox all */
      -ms-user-select: none;      /* IE 10+ */
      user-select: none;          /* Likely future */    
    }

This works fine when I applied "user-select" CSS property as "none" for all the "sections div". But when the section (section2) in between the top (section1) and the bottom (section3) doesn't have the property applied, and selection is happening when the selection starts from either from section1(top) or section2(bottom) and extends till section 2(midddle).

This issue happens only in IE and the same works fine in chrome and firefox.

Enclosed JSFiddle link for the same. https://jsfiddle.net/Thirunavukkarasu/bwf5emvp/

Bargavi Umapathy
  • 11
  • 1
  • 3
    http://stackoverflow.com/questions/3900798/is-there-user-select-for-opera-10-62-and-ie9 – Lalji Tadhani Jul 26 '16 at 13:38
  • Section 2 text also get selected in Firefox v. 49. So, what's actual problem is ? not getting that ? – Virendrasingh Jul 26 '16 at 13:46
  • Thanks ! But when I start selecting the from selectable element extend my selection till unselectable element, this doesn't work :( – Bargavi Umapathy Jul 26 '16 at 13:51
  • Ok something i understand the selection done either from mid to top and mid to bottom only in IE. Am i right ? – Virendrasingh Jul 26 '16 at 14:00
  • You can use unselectable="on". is working in Internet Explorer 6+ and in Opera. it may also helps - https://msdn.microsoft.com/en-us/library/jj152140(v=vs.85).aspx – Virendrasingh Jul 26 '16 at 14:21
  • This question is asked previously check this link [text selection](http://stackoverflow.com/questions/826782/how-to-disable-text-selection-highlighting-using-css) – Omkar Vaity Jul 26 '16 at 14:35

1 Answers1

0

For IE < 10 (also IE10 if user-select not working ) and Opera, you will need to use the unselectable attribute of the element you wish to be unselectable. You can set this using an attribute in HTML:

<div id="Div1" unselectable="on" class="unselectable">...</div>

Java Script :

function makeUnselectable(node) {
if (node.nodeType == 1) {
    node.setAttribute("unselectable", "on");
}
var child = node.firstChild;
while (child) {
    makeUnselectable(child);
    child = child.nextSibling;
}

}

makeUnselectable(document.getElementById("Div1"));

Virendrasingh
  • 191
  • 2
  • 13