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


198

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



@ 존 : 위의 링크가 귀하의 질문에 대답합니까? 그렇지 않은 경우 상황이 어떻게 다른지 좀 더 자세하게 설명 할 수 있습니다.
Jørn Schou-Rode

1
그렇습니다. 그러나 대답은 동일하지만 그 질문은 매우 구체적이므로 많은 사람들이 더 일반적인 질문을 생각하면서 그 대답을 놓칠 수 있습니다.
Dawid Ohia

@ 존 : 다른 질문에는 jQuery 솔루션도 있습니다.
Omar Abid

답변:


274

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

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

1
JavaScript 대안은 IE에서만 작동합니다. 다른 브라우저에서는 "onselectstart"를 사용할 수 없습니다
Omar Abid

13
@Omar : 잘 알고 있습니다.
SLaks


11
고마워 드래그 슬라이더를 작업 중이며 프로세스에서 텍스트를 선택하지 않는 방법이 필요했습니다.
스펜서 루 포트

35
"선택하지 마십시오"라고 텍스트 선택 (또는 그 문제에 대해 SO의 다른 것)을 말하는 사람들에게 당신의 마음을 조금여십시오. 종종 사람들은 텍스트가있는 레이블을 두 번 클릭 할 때 텍스트 선택을 피하는 등 미학적 이유로 텍스트를 비활성화하는 경우가 종종 있습니다. 따라서 질문에 대답하거나 실제 대응점을 제공하고 부정에 대해 말하는 내용을 지정하지 마십시오. 아이디어를 일반적인 방식으로 긁지 마십시오.
dudewad

102

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

1
jquery ui 기능은 훌륭하지만 동일한 수준의 보호 기능을 제공하지는 않지만 직접 선택하는 것을 방해하지 않지만 다른 DOM 객체에서 선택을 수행하는 경우 CSS 규칙도 필요합니다. = function () {return this.bind (($ .support.selectstart? "selectstart": "mousedown") + ".ui-disableSelection", function (event) {event.preventDefault ();}); }
chrismarx

2
disableSelection ()은 jQuery UI 1.9에서 더 이상 사용되지 않습니다.
mar10

브라우저에 따라 작동하려면 .on ( 'mousedown', false)이 필요할 수도 있습니다. 그러나 기존 기능을 중단시킬 수 있기 때문에 기본적으로 마우스 다운 이벤트를 종료하는 것은 위험합니다.
Dan

1
Arg. 감가 상각되었습니다. 이것을 합법적으로 원할 때가 많습니다.
척 레 버트

일부 앵커 텍스트에서 마우스 오른쪽 버튼 클릭 컨텍스트 메뉴를 만들고 있는데 클릭시 텍스트를 선택하고 싶지 않습니다. 예, @Monk, 이것은 합법적 인 예에 해당합니다.
Wayne Smallman 2016 년

75

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

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

Chrome은 -webkit-user-select
tim을

3
일반적으로 jQuery 또는 JS를 사용하는 대신 CSS 방식으로 작업을 수행하십시오. jQuery 애니메이션과 CSS 전환과 마찬가지로 브라우저에 내장 된 방식은 항상 최고이며 가장 효율적입니다.
Brian Leishman

17

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

3
attr('unselectable', 'on')두 번 전화 해요? 오타입니까 아니면 유용합니까?
KajMagnus

이것은 나에게 효과적이지만 ".each (function () {$ (this) .attr ( 'unselectable', 'on') .bind ( 'selectstart', function () {return false;} );}); " 누군가를 돕는 경우를 대비하여 특정 웹 응용 프로그램 (JQuery Mobile)에 대한 섹션을 참조하십시오.
Anthony

13

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

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

1
복잡하지 않음-훌륭합니다! 감사합니다. 장애인 용 나는 .attr ( 'disabled', 'disabled')를 추가했다
자유 의지

업데이트 : .attr ( 'disabled', 'disabled') 대신 .attr ( 'readonly', 'readonly')을 사용했습니다. 비활성화하면 MVC에 모델 변수가 게시되지 않습니다 (모델 변수가 null 임). 읽기 전용은 여전히 ​​찾아보기를 비활성화했으며 (나는 부트 스트랩을 사용합니다) 항목 값을 게시 할 수 있습니다
자유 의지

우수 형제, 난 대체하기 위해이 코드를 사용하지 않는 "포인터 이벤트를 : 없음;"그 (11)에 관해서 IE에없는 일
Shortys Oberto Dutari

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

코드와 함께 간단한 답변 요약을 작성할 수 있습니까?
jonsca

6

이것은 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>

이것은 대단하다! 그러나 "초점"을 어떻게 막을 수 있습니까?
mutanic

3
이 답변은 2013 년에 구식입니다
Dan

6

이것은 실제로 매우 간단합니다. 텍스트 선택을 비활성화하고 텍스트를 클릭 + 드래그 (예 : Chrome의 링크)하려면 다음 jQuery 코드를 사용하십시오.

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

이 모든 것은 및 태그 mousedown()에서 마우스 ( )로 클릭 할 때 기본값이 발생하는 것을 방지합니다 . 당신은 아주 쉽게 단지 (두 따옴표 사이에 - 예를 들면 변화를 텍스트를 변경하여 요소를 변경할 수 있습니다 에 만드는 사업부는, 음, 선택할 수 없게 할 수 있습니다.bodyhtml$('body, html')$('#myUnselectableDiv')myUnselectableDiv

이것을 보여주고 증명하는 빠른 스 니펫 :

$('#no-select').mousedown(function(event) {
  event.preventDefault();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span id="no-select">I bet you can't select this text, or drag <a href="#">this link</a>, </span>
<br/><span>but that you can select this text, and drag <a href="#">this link</a>!</span>

이 효과는 완벽하지 않으며 전체 창을 선택할 수없는 상태에서 최상의 성능을 발휘합니다. 추가하고 싶을 수도 있습니다

일부 핫키 취소 (예 : Ctrl+aCtrl+c. 테스트 : Cmd+aCmd+c)

또한 위의 블라디미르 답변의 해당 섹션을 사용하여. (자신의 게시물에 도착 여기 )


1

CHROME 용 1 라인 솔루션 :

body.style.webkitUserSelect = "none";

FF :

body.style.MozUserSelect = "none";

IE는 "선택 불가능"속성을 설정해야합니다 (상세 내용).

Chrome에서 이것을 테스트했으며 작동합니다. 이 속성은 상속되므로 body 요소에서 설정하면 전체 문서에서 선택이 비활성화됩니다.

자세한 내용은 여기 : http://help.dottoro.com/ljrlukea.php

Closure를 사용하는 경우 다음 함수를 호출하십시오.

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

1

이 코드 는 모든 브라우저에서 작동 하며 최소한의 오버 헤드가 필요 하다고 생각합니다 . 그것은 실제로 위의 모든 대답의 하이브리드입니다. 버그를 발견하면 알려주십시오!

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

1

모든 접근 방식을 시도했지만 IWebBrowser2를 사용하고 있으며 10 가지 브라우저가 없기 때문에이 방법이 가장 간단합니다.

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

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


0

적절한 경우이를위한 한 가지 해결책은 <button>선택할 수없는 텍스트에 대해 를 사용하는 것 입니다. click일부 텍스트 블록 에서 이벤트에 바인딩 하고 해당 텍스트를 선택할 수 없도록하려면 버튼으로 변경하면 의미가 향상되고 텍스트가 선택되지 않습니다.

<button>Text Here</button>

-1

내가 찾은 가장 간단하고 간단한 방법은 Ctrl + C를 방지하고 마우스 오른쪽 버튼을 클릭하는 것입니다. 이 경우 모든 것을 차단 했으므로 따로 지정할 필요가 없습니다.

$(document).bind("contextmenu cut copy",function(e){
    e.preventDefault();
    //alert('Copying is not allowed');
});
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.