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.

Answer 1

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.

Answer 2

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(); });

Answer 3

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à :)