[javascript] jQuery를 사용하여 텍스트 선택을 비활성화하는 방법은 무엇입니까?

jQuery 또는 jQuery-UI에 지정된 문서 요소에 대한 텍스트 선택을 비활성화하는 기능이 있습니까?

답변

jQuery 1.8에서는 다음과 같이 할 수 있습니다.

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

답변

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

답변

이 답변 ( 텍스트 표 강조 방지 )이 가장 유용 하다는 것을 알았 으며 IE 호환성을 제공하는 다른 방법과 결합 할 수 있습니다.

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

답변

여기에 분리 선택에 대한보다 포괄적 인 솔루션 및 바로 가기 키의 일부의 취소입니다 (예 : Ctrl+ a와 Ctrl+가 c. 시험 : Cmd + a과 Cmd+ 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/

이전 버전의 FireFox에는 충분하지 않을 수도 있습니다 (어떤 것을 알 수는 없습니다). 이 모든 것이 작동하지 않으면 다음을 추가하십시오.

.on('mousedown', false)

답변

다음은 모든 일반 브라우저 (IE, Chrome, Mozilla, Opera 및 Safari)에서 모든 클래스 ‘항목’을 선택하지 못하게합니다.

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

답변

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

답변

이것은 JavaScript를 사용하여 쉽게 수행 할 수 있습니다. 이것은 모든 브라우저에 적용됩니다

<script type="text/javascript">

/***********************************************
* Disable Text Selection script- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/

function disableSelection(target){
if (typeof target.onselectstart!="undefined") //For IE 
    target.onselectstart=function(){return false}
else if (typeof target.style.MozUserSelect!="undefined") //For Firefox
    target.style.MozUserSelect="none"
else //All other route (For Opera)
    target.onmousedown=function(){return false}
target.style.cursor = "default"
}
 </script>

이 함수를 호출

<script type="text/javascript">
   disableSelection(document.body)
</script>