2012-03-02 2 views
0

문서의 선택을 사용하지 않도록 설정 한 후 테이블의 입력을로드하는 것이 실제 문제입니다. 나는 끔찍한 푸른 선택 범위를 원한다 (나는 CSS를 사용하여 내 자신의 선택 범위를 makign). 그래서 나는 그것을 제거하고 싶다. 그러나 특정 입력에 대해 선택을 활성화해야합니다. 문제는 내가 문서에서 선택을 비활성화 한 다음 문서를 사용하지 않고 다시 시도하도록 설정 한 경우뿐입니다. 표 셀에서 선택을 개별적으로 비활성화하면 제대로 작동하지 않거나 실수로 다시 셀 범위를 선택할 수 있습니다.왜 문서를 비활성화 한 후에 문서의 요소를 다시 활성화합니까?

업데이트 : IE 전용입니다. 나는 기본적으로 모든 강조 표시를 비활성화하거나 최악의 경우 표의 모든 강조 표시를 비활성화하려고합니다. 그런 다음 특정 셀에서 강조 표시를 활성화하려고합니다. 스프레드 시트 응용 프로그램을 만드는 중입니다. 나는 파란색을 원하지 않는다. 강조 표시된 부분을 제어하려고합니다. 죄송합니다 위의 명확하지 않은 경우. 누군가가 도움을 줄 수

희망 ...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
     <title></title> 
     <link href="/Content/Fiddle.css" rel="stylesheet" type="text/css" /> 
     <link href="/Content/Site.css" rel="stylesheet" type="text/css" /> 
     <script src="/Scripts/jquery-1.4.1.js" type="text/javascript"></script> 
     <script src="/Scripts/jquery-ui-1/js/jquery-1.7.1.min.js" type="text/javascript"></script> 
    </head> 
    <body> 
     <div class="page"> 
      <h2>Javascript Fiddle</h2> 
      <script> 
      jQuery(document).ready(function() { 
       disableSelection(document.body); 
       //enable certain elements 
       var selectableElements = jQuery('.highlightable'); 
       jQuery.each(selectableElements, function (key, value) { 
        enableSelection(this); 
       }); 
      }); 

      function disableSelection(target) { 
       if (typeof target.onselectstart != "undefined") //IE route 
       { 
        target.onselectstart = function() { 
         return false; 
        }; 
       } 
       else if (typeof target.style.MozUserSelect != "undefined") //Firefox route     
        target.style.MozUserSelect = "none"; 
       else //All other route (ie: Opera)     
        target.onmousedown = function() { return false; }; 
       try { 
        target.style.cursor = "default"; 
       } 
       catch (ex) { 
       } 
      } 

      function enableSelection(target) { 
       if (typeof target.onselectstart != "undefined") { //IE route     
        target.onselectstart = function() { 
         return true; 
        }; 
       } 
       else if (typeof target.style.MozUserSelect != "undefined") //Firefox route     
        target.style.MozUserSelect = "none"; 
       else //All other route (ie: Opera)     
        target.onmousedown = function() { return false; }; 

       target.style.cursor = "default"; 
      } 
      </script> 
      <div id="tableHolder"> 
       <table> 
        <tr><td>abc 12 3</td><td class="highlightable"><input id="testSelection" value="dblClickMe" type="text" /></td></tr> 
        <tr><td>abc 12 3</td><td><input class="highlightable" type="text" /></td></tr> 
        <tr><td>abc 12 3</td><td><input class="highlightable" type="text" /></td></tr> 
        <tr><td>abc 12 3</td><td><input class="highlightable" type="text" /></td></tr> 
       </table> 
      </div> 
      <script src="/Scripts/Fiddle.js" type="text/javascript" ></script> 
     </div> 
    </body> 
</html> 
+1

. 너 뭐하려고하는거야? 왜 당신은'disableSelection (document.body);'? – BoltClock

+0

위를 참조하십시오. 입력 요소에서 파란색 강조 표시를 해제하려고합니다. – Exitos

답변

0

당신은 어떤 브라우저를위한 CSS와 함께이 작업을 수행 할 수 있습니다 user-select: none;. 이미 jQuery를 사용하고 있기 때문에, 나는 (당신의 필요에 맞게 수정) 내가 jQuery.contextMenu에서 사용하는 코드의 조각을 제공 할 수 있습니다 : 그것은 불가능 그 자체입니다 문서 내에서 아무것도 수 있도록 이해가되지 않습니다

function abortevent(e){ 
    e.preventDefault(); 
    e.stopImmediatePropagation(); 
}; 

if($.browser.msie) { 
    $(document).on('selectstart.disableTextSelect', 'td', abortevent); 
} else if(!$.browser.mozilla) { 
    $(document).on('mousedown.disableTextSelect', 'td', abortevent); 
} 
+0

죄송하지만 이것은 IE를위한 것이므로 CSS 방식으로 작동하지 않습니다 ... – Exitos

+0

그 이유는 내 대답은 자바 스크립트 fallback을 제공합니다 ... – rodneyrehm

관련 문제