IE8 텍스트 선택 문제

Question

IE8 텍스트 선택 문제.

jquery UI를 사용하여 크기 조정 가능한 div를 만들었습니다. 그래서 기본적으로 크기를 조정할 때 div 텍스트도 선택되고, 다시 크기를 조정해야 할 경우 LI 외부를 클릭 한 다음 다시 크기를 조정해야합니다.

나는

-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; 

는 또한뿐만 아니라 몇 JS의 codesnippets을 시도 해봤지만 해결되지 수 있습니다.

내 바이올린 : http://jsfiddle.net/svXTa/16/

어떤 도움?

다음은 문제의 이미지입니다.

Answer 1

사용

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

최초의 마우스를 눌러 이러한 요소 중 하나에 유래 곳은 선택을 해제합니다. 마우스 누름이 다른 곳에서 시작되면 텍스트는 여전히 강조 표시됩니다.

사람들이 컨테이너의 텍스트를 강조 표시하지 않는다면 용기 수준에서 설정할 수 있습니다. 당신은 여전히 ​​자바 스크립트를 사용할 필요가 있으므로,

이

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

불행하게도 CSS 솔루션은 IE8에서 지원되지 않습니다 :

Answer 2

이상적인 솔루션은 모든 공급 업체 접두사와 함께, 텍스트 선택을 해제하기 위해 CSS 속성 user-select을 사용하는 것입니다 .

브랜든가 제안한 것처럼, jQuery를 UI의 disableSelection()이 하나 개의 옵션이지만, 일부 바람직하지 않은 부작용이있을 수 있습니다 : 당신이 jQuery UI source code 보면이 함수는, 그렇지 않으면 onmousedown 삭제됩니다, 만약 존재하는 onselectstart 이벤트를 짧은 - 단락으로 작동 . onselectstart은 비표준이며 Firefox에서 지원되지 않으므로 해당 브라우저에서 클릭이 불가능할 수 있습니다. 이는 바람직하지 않을 수 있습니다. 일을 할 수 없습니다 만

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

Answer 3

CSS :

가장 좋은 방법은이 같은 뭔가 onselectstart 만 onselectstart을 해제하려면 위 CSS 및 일부 자바 스크립트의 조합입니다.

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

함으로써 해결할 수 :