javascript - IE8 text selection issue - Stack Overflow

admin管理员组

文章数量:1023838

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 : /

Any help?

Below is the image of the issue.

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/svXTa/16/

Any help?

Below is the image of the issue.

• javascript
• jquery
• css
• jquery-ui
• internet-explorer-8

Share Improve this question Follow edited May 29, 2013 at 18:29 Spudley 169k3939 gold badges238238 silver badges308308 bronze badges asked Aug 10, 2012 at 6:35 user1184100user1184100 6,9043030 gold badges8484 silver badges122122 bronze badges 6

• 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 Commented Aug 10, 2012 at 7:32
• thanks for reply mark but in jquery ui website there is no demo like this to test. – user1184100 Commented Aug 10, 2012 at 7: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 Commented Aug 10, 2012 at 7:55
• thanks anyways hoping for a help from anyone on this.. – user1184100 Commented Aug 10, 2012 at 8:00
• 1 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 help.dottoro./lcbixvwm.php and a demo 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 Commented Nov 4, 2014 at 21:33

 |  Show 1 more ment

3 Answers 3

Sorted by: Reset to default 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.

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

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

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 : /

Any help?

Below is the image of the issue.

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/svXTa/16/

Any help?

Below is the image of the issue.

• javascript
• jquery
• css
• jquery-ui
• internet-explorer-8

Share Improve this question Follow edited May 29, 2013 at 18:29 Spudley 169k3939 gold badges238238 silver badges308308 bronze badges asked Aug 10, 2012 at 6:35 user1184100user1184100 6,9043030 gold badges8484 silver badges122122 bronze badges 6

• 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 Commented Aug 10, 2012 at 7:32
• thanks for reply mark but in jquery ui website there is no demo like this to test. – user1184100 Commented Aug 10, 2012 at 7: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 Commented Aug 10, 2012 at 7:55
• thanks anyways hoping for a help from anyone on this.. – user1184100 Commented Aug 10, 2012 at 8:00
• 1 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 help.dottoro./lcbixvwm.php and a demo 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 Commented Nov 4, 2014 at 21:33

 |  Show 1 more ment

3 Answers 3

Sorted by: Reset to default 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.

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

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

本文标签： javascriptIE8 text selection issueStack Overflow