IE8 text selection issue

Question

IE8 text selection issue.

I have used jquery ui and created a resizeable div. So basically when i resize the div text also gets selected and also if i need to resize it again i need to click outside of the LI and then resize it again.

I've tried

-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;

-webkit-user-drag: none; 
-moz-user-drag: none; 
user-drag: none;

Also tried few js codesnippets as well but could not get it fixed.

My fiddle : http://jsfiddle.net/svXTa/16/

Any help?

Below is the image of the issue.

enter image description here

what you have tried are all CSS3 properties. IE8 does not read or execute them because IE8 is not understanding CSS3. for your problem: On the jQuery UI page, the demo, tried that one in IE8, is it happening there too? — Mark, Aug 10 '12 at 07:32
thanks for reply mark but in jquery ui website there is no demo like this to test. — user1184100, Aug 10 '12 at 07:39
oh. okay, its IE8, there are bugs in this browser, and i guess that the behavior of the browser thinks you are selecting, while doing a resize. IE8 is buggy. Sorry, could not help you — Mark, Aug 10 '12 at 07:55
possible duplicate of [css rule to disable text selection highlighting](http://stackoverflow.com/questions/826782/css-rule-to-disable-text-selection-highlighting) — RoToRa, Aug 10 '12 at 09:17
The `-moz-user-drag` and `user-drag` properties don't exist and have no effect in any browsers. The `-webkit-user-drag` property exists, but the `none` value is only relevant to image and anchor tags, so it's doing nothing here. Here's some more detail http://help.dottoro.com/lcbixvwm.php and a demo http://codepen.io/cvn/pen/BblnC. This isn't related to the problem at hand, but I wanted to leave this note for people in the future who might be curious like I was. — Chad von Nau, Nov 04 '14 at 21:33

score 2 · Answer 1 · edited May 29 '13 at 18:28

2

Use

$('ul, #dgArea').disableSelection();

This will only disable selections where the initial mouse press originates in one of those elements. If the mouse press begins elsewhere the text could still get highlighted.

If you don't care about people being able to highlight the text in your container you could set it at .container level.

edited May 29 '13 at 18:28

Linus Caldwell

10,908
12
46
58

answered Aug 11 '12 at 08:38

Brandon

3,174
1
16
7

score 2 · Answer 2 · answered Dec 05 '13 at 20:39

The ideal solution is to use the CSS property user-select to disable text selection, along with all its vendor prefixes:

-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;

Unfortunately the CSS solution is not supported in IE8, so you still need to use Javascript.

As Brandon suggested, jQuery UI's disableSelection() is one option, but it may have some undesirable side-effects: if you look at the jQuery UI source code, the function works by short-circuiting the onselectstart event if present, otherwise it will cancel onmousedown. Since onselectstart is nonstandard and not supported in Firefox, this would disable clicking in that browser, which is probably not desirable.

The best solution is a combination of the above CSS and some Javascript to disable onselectstart and only onselectstart with something like this:

$("ul, #dgArea").on("selectstart", function(e) { e.preventDefault(); });

user3705905 · Answer 3 · 2015-03-09T08:02:02.590

CSS alone can't do the job. here is an IE8 specific pure JS solution that works nicely for me :

// test if is an old browser with lazyload optimisation
// because I often need to test if it is IE8
function isIE8(){
    var rv = -1; // Return value assumes failure.
    var appName = navigator.appName.toLowerCase();

    if (appName.indexOf('nternet')*appName.indexOf('xplorer') > 1) {
        var ua = navigator.userAgent.toLowerCase();
        var re = new RegExp("msie ([0-9]{1,}[\.0-9]{0,})");
        if (re.exec(ua))
            rv = parseFloat(RegExp.$1);
    }
    // LazyLoad optimisation
    isIE8 = function(){return (rv == 8);};
    return isIE8(); // 2 : call
}

function disableSelection(anElt){
// double check because some browsers mess with navigator.appName and userAgent
if(isIE8 && anElt.attachEvent) 
    anElt.attachEvent("onselectstart", function(){return false;});
}

voilà :)

Works great! Though a much quicker detect for IE < 9 would be `if( document.all && !document.addEventListener )`. — Beejor, Jul 08 '15 at 05:44

IE8 text selection issue

3 Answers3