[JQUERY] 어떻게 jQuery를 사용하지 않도록 텍스트 선택에?

어떻게 jQuery를 사용하지 않도록 텍스트 선택에?

해결법

1. ---

   1.다음과 같이 jQuery를 1.8,이 수행 할 수 있습니다 :

   다음과 같이 jQuery를 1.8,이 수행 할 수 있습니다 :

   (function($){
       $.fn.disableSelection = function() {
           return this
                    .attr('unselectable', 'on')
                    .css('user-select', 'none')
                    .on('selectstart', false);
       };
   })(jQuery);
   

2. ---

   2.당신이 jQuery를 UI를 사용하는 경우, 거기에 대한 방법이지만 그것은 단지 마우스 선택 (즉, CTRL + A는 여전히 작동됩니다) 처리 할 수 ​​있습니다 :

   당신이 jQuery를 UI를 사용하는 경우, 거기에 대한 방법이지만 그것은 단지 마우스 선택 (즉, CTRL + A는 여전히 작동됩니다) 처리 할 수 ​​있습니다 :

   $('.your-element').disableSelection(); // deprecated in jQuery UI 1.9
   

   당신이 jQuery를 UI를 사용하지 않으려는 경우 코드는 정말 간단하다 :

   $(el).attr('unselectable','on')
        .css({'-moz-user-select':'-moz-none',
              '-moz-user-select':'none',
              '-o-user-select':'none',
              '-khtml-user-select':'none', /* you could also put this in a class */
              '-webkit-user-select':'none',/* and add the CSS class here instead */
              '-ms-user-select':'none',
              'user-select':'none'
        }).bind('selectstart', function(){ return false; });
   

3. ---

   3.나는이 답변 (텍스트 테이블의 방지 하이라이트) 가장 도움이 발견, 아마도 그것은 IE의 호환성을 제공하는 또 다른 방법으로 결합 될 수있다.

   나는이 답변 (텍스트 테이블의 방지 하이라이트) 가장 도움이 발견, 아마도 그것은 IE의 호환성을 제공하는 또 다른 방법으로 결합 될 수있다.

   #yourTable
   {
     -moz-user-select: none;
     -khtml-user-select: none;
     -webkit-user-select: none;
     user-select: none;
   }
   

4. ---

   4.여기에 분리 선택에 대한보다 포괄적 인 솔루션, 그리고 (. : Cmd를 + a와 Cmd를 + C를 Ctrl + A와 Ctrl 키 + C 검사 등) 바로 가기 키의 일부의 취소입니다

   여기에 분리 선택에 대한보다 포괄적 인 솔루션, 그리고 (. : Cmd를 + a와 Cmd를 + C를 Ctrl + A와 Ctrl 키 + C 검사 등) 바로 가기 키의 일부의 취소입니다

   (function($){
   
     $.fn.ctrlCmd = function(key) {
   
       var allowDefault = true;
   
       if (!$.isArray(key)) {
          key = [key];
       }
   
       return this.keydown(function(e) {
           for (var i = 0, l = key.length; i < l; i++) {
               if(e.keyCode === key[i].toUpperCase().charCodeAt(0) && e.metaKey) {
                   allowDefault = false;
               }
           };
           return allowDefault;
       });
   };
   
   
   $.fn.disableSelection = function() {
   
       this.ctrlCmd(['a', 'c']);
   
       return this.attr('unselectable', 'on')
                  .css({'-moz-user-select':'-moz-none',
                        '-moz-user-select':'none',
                        '-o-user-select':'none',
                        '-khtml-user-select':'none',
                        '-webkit-user-select':'none',
                        '-ms-user-select':'none',
                        'user-select':'none'})
                  .bind('selectstart', false);
   };
   
   })(jQuery);
   

   및 호출 예 :

   $(':not(input,select,textarea)').disableSelection();
   

   jsfiddle.net/JBxnQ/

   이것은 또한 파이어 폭스의 이전 버전 (I 어떤 말할 수 없다) 충분하지 될 수 있습니다. 모든 일이없는 작업을 수행하는 경우, 다음을 추가합니다 :

   .on('mousedown', false)
   

5. ---

   5.다음은 일반적인 모든 브라우저 (IE, 크롬, 모질라, 오페라와 사파리)에서 모든 클래스 '아이템'의 선택을 해제합니다 :

   다음은 일반적인 모든 브라우저 (IE, 크롬, 모질라, 오페라와 사파리)에서 모든 클래스 '아이템'의 선택을 해제합니다 :

   $(".item")
           .attr('unselectable', 'on')
           .css({
               'user-select': 'none',
               'MozUserSelect': 'none'
           })
           .on('selectstart', false)
           .on('mousedown', false);
   

6. ---

   6.

           $(document).ready(function(){
               $("body").css("-webkit-user-select","none");
               $("body").css("-moz-user-select","none");
               $("body").css("-ms-user-select","none");
               $("body").css("-o-user-select","none");
               $("body").css("user-select","none");
           });
   

7. ---

   7.이것은 쉽게 자바 스크립트이 모든 브라우저에 적용하여 수행 할 수 있습니다

   이것은 쉽게 자바 스크립트이 모든 브라우저에 적용하여 수행 할 수 있습니다

8. ---

   8.이것은 실제로 매우 간단합니다. 해제 텍스트 선택에 바로 다음 jQuery 코드를 사용, (도 + 드래그 보내고 텍스트 크롬에서 (예를 들어, 링크)를 클릭)

   이것은 실제로 매우 간단합니다. 해제 텍스트 선택에 바로 다음 jQuery 코드를 사용, (도 + 드래그 보내고 텍스트 크롬에서 (예를 들어, 링크)를 클릭)

   $('body, html').mousedown(function(event) {
       event.preventDefault();
   });
   

   이가하는 모든 것은 당신이 몸과 HTML 태그 마우스 (mousedown ())를 클릭 할 때 일어나는에서 기본을 방지합니다. 당신은 매우 쉽게 myUnselectableDiv의 사업부는, 음, 선택할 수 없게 할 수 있도록 ( '# myUnselectableDiv') 만 $에 ( '몸, html로') (두 따옴표 사이에-텍스트를 변경 예컨대 변경 $에 의해 요소를 변경할 수 있습니다.

   쇼 빠른 조각 / 당신이 증명 :

   $ ( '#없는 선택'). 기능 (이벤트 (mousedown) { 에서는 event.preventDefault (); }); <스크립트 SRC = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"> <스팬 ID = "없는 선택"> 나는 당신이이 텍스트를 선택할 수 없습니다 내기, 또는 드래그이 링크 를보기
   하지만,이 텍스트를 선택 할 수 있으며, 드래그 링크 를보기

   전체 창을 선택할 수 없습니다하는 동안이 효과가 수행하는 가장 완벽하지 않습니다, 그리고 있습니다. 당신은 또한 추가 할 수 있습니다

   뿐만 아니라, 위의 블라디미르의 대답의 섹션을 사용하여. (여기에 자신의 게시물에 도착)

9. ---

   9.CHROME 1 라인 용액 :

   CHROME 1 라인 용액 :

   body.style.webkitUserSelect = "none";
   

   및 FF :

   body.style.MozUserSelect = "none";
   

   IE는 "선택할 수없는"속성 (아래에 세부 사항)를 설정해야합니다.

   나는 크롬이를 테스트하고 그것을 작동합니다. body 요소에를 설정하면 전체 문서의 선택을 해제 할 수 있도록이 속성은 상속됩니다.

   세부 여기 : http://help.dottoro.com/ljrlukea.php

   당신은 폐쇄를 사용하는 경우, 단지이 함수를 호출 :

   goog.style.setUnselectable(myElement, true);
   

   그것은 투명하게 모든 브라우저를 처리합니다.

   비 IE 브라우저는 다음과 같이 처리됩니다

   goog.style.unselectableStyle_ =
       goog.userAgent.GECKO ? 'MozUserSelect' :
       goog.userAgent.WEBKIT ? 'WebkitUserSelect' :
       null;
   

   여기에 정의 : http://closure-library.googlecode.com/svn/!svn/bc/4/trunk/closure/goog/docs/closure_goog_style_style.js.source.html

   IE의 일부는 다음과 같이 처리된다 :

   if (goog.userAgent.IE || goog.userAgent.OPERA) {
   // Toggle the 'unselectable' attribute on the element and its descendants.
   var value = unselectable ? 'on' : '';
   el.setAttribute('unselectable', value);
   if (descendants) {
     for (var i = 0, descendant; descendant = descendants[i]; i++) {
       descendant.setAttribute('unselectable', value);
     }
   }
   

10. ---

    10.나는 모든 브라우저에서이 코드 작품을 생각하고 최소한의 오버 헤드를 필요로한다. 정말 위의 모든 답변의 하이브리드입니다. 당신이 버그를 발견하면 알려주세요!

    나는 모든 브라우저에서이 코드 작품을 생각하고 최소한의 오버 헤드를 필요로한다. 정말 위의 모든 답변의 하이브리드입니다. 당신이 버그를 발견하면 알려주세요!

    CSS를 추가 :

    .no_select { user-select: none; -o-user-select: none; -moz-user-select: none; -khtml-user-select: none; -webkit-user-select: none; -ms-user-select:none;}
    

    jQuery를 추가 :

    (function($){
        $.fn.disableSelection = function() 
        {       
            $(this).addClass('no_select');              
            if($.browser.msie)
            {
                $(this).attr('unselectable', 'on').on('selectstart', false);            
            }
        return this;            
    };
    })(jQuery);
    

    옵션 :뿐만 아니라 모든 어린이 요소에 대한 사용하지 않도록 선택하려면 IE 블록을 변경할 수 있습니다 :

    $(this).each(function() {
        $(this).attr('unselectable','on')
        .bind('selectstart',function(){ return false; });
    });
    

    용법:

    $('.someclasshere').disableSelection();
    

11. ---

    11.나는 모든 방법을 시도했습니다, 나는 IWebBrowser2를 사용하고 있는데 맞설 10 브라우저가 없기 때문에이 사람은 나를 위해 간단합니다 :

    나는 모든 방법을 시도했습니다, 나는 IWebBrowser2를 사용하고 있는데 맞설 10 브라우저가 없기 때문에이 사람은 나를 위해 간단합니다 :

    document.onselectstart = new Function('return false;');
    

    나를 위해 완벽하게 작동합니다!

12. ---

    12.이 문제를 해결하는 한 가지 방법은, 적절한 경우에, 당신이 선택할 수 싶지 않아 텍스트에 대한 <버튼>을 사용하는 것입니다. 일부 텍스트 블록에 클릭 이벤트에 바인딩하고 수행하는 경우는 버튼이 의미를 개선하고 또한 텍스트가 선택되지 않도록 할 예정 변경, 텍스트가 선택되고 싶지.

    이 문제를 해결하는 한 가지 방법은, 적절한 경우에, 당신이 선택할 수 싶지 않아 텍스트에 대한 <버튼>을 사용하는 것입니다. 일부 텍스트 블록에 클릭 이벤트에 바인딩하고 수행하는 경우는 버튼이 의미를 개선하고 또한 텍스트가 선택되지 않도록 할 예정 변경, 텍스트가 선택되고 싶지.

    <button>Text Here</button>
    

13. ---

    13.최고의 간단한 방법 나는, 방지가 + C, 마우스 오른쪽 버튼으로 클릭 Ctrl을 발견했다. 난 아무것도 지정할 필요가 없습니다이 경우에 나는 모든 것을 막았다.

    최고의 간단한 방법 나는, 방지가 + C, 마우스 오른쪽 버튼으로 클릭 Ctrl을 발견했다. 난 아무것도 지정할 필요가 없습니다이 경우에 나는 모든 것을 막았다.

    $(document).bind("contextmenu cut copy",function(e){
        e.preventDefault();
        //alert('Copying is not allowed');
    });
    

from https://stackoverflow.com/questions/2700000/how-to-disable-text-selection-using-jquery by cc-by-sa and MIT license