[JQUERY] 요소에 텍스트를 선택 (마우스로 강조 유사)

요소에 텍스트를 선택 (마우스로 강조 유사)

해결법

1. ---

   1.함수 selectText (노드) { = document.getElementById를 노드 (노드); 경우 (document.body.createTextRange) { CONST document.body.createTextRange 범위 = (); range.moveToElementText (노드); range.select (); } 다른 경우 (window.getSelection) { CONST 선택 window.getSelection = (); CONST document.createRange 범위 = (); range.selectNodeContents (노드); selection.removeAllRanges (); selection.addRange (범위); } 다른 { console.warn는 ( "노드에서 텍스트를 선택 할 수 없습니다 : 지원되지 않는 브라우저를."); } } const를 클릭 = document.querySelector ( '클릭 나.'); clickable.addEventListener ( '클릭'() => selectText ( '목표'));

   일부 텍스트가 간다!

   이 Moar 텍스트!

   나를 클릭!

   함수 selectText (노드) { = document.getElementById를 노드 (노드); 경우 (document.body.createTextRange) { CONST document.body.createTextRange 범위 = (); range.moveToElementText (노드); range.select (); } 다른 경우 (window.getSelection) { CONST 선택 window.getSelection = (); CONST document.createRange 범위 = (); range.selectNodeContents (노드); selection.removeAllRanges (); selection.addRange (범위); } 다른 { console.warn는 ( "노드에서 텍스트를 선택 할 수 없습니다 : 지원되지 않는 브라우저를."); } } const를 클릭 = document.querySelector ( '클릭 나.'); clickable.addEventListener ( '클릭'() => selectText ( '목표'));

   일부 텍스트가 간다!

   이 Moar 텍스트!

   나를 클릭!

   여기에 작동하는 데모입니다. JQuery와 플러그인을 찾는 당신을 위해, 나도 그 중 하나를했다.

   나는이 스레드에서 이것에 대한 해결책을 발견했다. 나는 브라우저에 관계없이, 주어진 정보를 수정하고 어떤 요소에있는 텍스트를 선택하려면 완전히 끝내 함수를 만드는 jQuery를의 비트와 함께 섞어 할 수 있었다 :

   function SelectText(element) {
       var text = document.getElementById(element);
       if ($.browser.msie) {
           var range = document.body.createTextRange();
           range.moveToElementText(text);
           range.select();
       } else if ($.browser.mozilla || $.browser.opera) {
           var selection = window.getSelection();
           var range = document.createRange();
           range.selectNodeContents(text);
           selection.removeAllRanges();
           selection.addRange(range);
       } else if ($.browser.safari) {
           var selection = window.getSelection();
           selection.setBaseAndExtent(text, 0, text, 1);
       }
   }
   

2. ---

   2.여기 스니핑없이 브라우저와 jQuery를에 의존하지 않음을 가진 버전입니다 :

   여기 스니핑없이 브라우저와 jQuery를에 의존하지 않음을 가진 버전입니다 :

   function selectElementText(el, win) {
       win = win || window;
       var doc = win.document, sel, range;
       if (win.getSelection && doc.createRange) {
           sel = win.getSelection();
           range = doc.createRange();
           range.selectNodeContents(el);
           sel.removeAllRanges();
           sel.addRange(range);
       } else if (doc.body.createTextRange) {
           range = doc.body.createTextRange();
           range.moveToElementText(el);
           range.select();
       }
   }
   
   selectElementText(document.getElementById("someElement"));
   selectElementText(elementInIframe, iframe.contentWindow);
   

3. ---

   3.제이슨 코드 (윈도우와 문서의 범주에 다르므로) iframe 내에 요소에 대해 사용될 수 없다. 나는 그 문제를 해결하고 난 (체인 가능) 다른 jQuery 플러그인으로 사용하기 위해 그것을 수정 :

   제이슨 코드 (윈도우와 문서의 범주에 다르므로) iframe 내에 요소에 대해 사용될 수 없다. 나는 그 문제를 해결하고 난 (체인 가능) 다른 jQuery 플러그인으로 사용하기 위해 그것을 수정 :

   예 1 : 모든 텍스트 내부의 <코드>의 선택 번의 클릭하고 추가 클래스 태그는 "선택"

   $(function() {
       $("code").click(function() {
           $(this).selText().addClass("selected");
       });
   });
   

   예 2 : iframe 내에 요소를 선택 버튼 클릭에 :

   $(function() {
       $("button").click(function() {
           $("iframe").contents().find("#selectme").selText();
       });
   });
   

   참고 : iframe이 소스가 보안 오류를 방지하기 위해 동일한 도메인에 있어야합니다 것을 기억하십시오.

   jQuery를 플러그인 :

   jQuery.fn.selText = function() {
       var obj = this[0];
       if ($.browser.msie) {
           var range = obj.offsetParent.createTextRange();
           range.moveToElementText(obj);
           range.select();
       } else if ($.browser.mozilla || $.browser.opera) {
           var selection = obj.ownerDocument.defaultView.getSelection();
           var range = obj.ownerDocument.createRange();
           range.selectNodeContents(obj);
           selection.removeAllRanges();
           selection.addRange(range);
       } else if ($.browser.safari) {
           var selection = obj.ownerDocument.defaultView.getSelection();
           selection.setBaseAndExtent(obj, 0, obj, 1);
       }
       return this;
   }
   

   나는 IE8, 파이어 폭스, 오페라, 사파리, 크롬 (현재 버전)에서 테스트. 이 오래된 IE 버전 (진심으로 난 상관 없어)에서 작동 있는지 확실하지 않습니다.

4. ---

   4.이 스레드는 (죽은 지금) 정말 멋진 물건을 포함한다. 그러나 나는 때문에 "보안 오류"에 FF + 방화 광 3.5b99를 사용하여이 페이지에 바로 그것을 할 수 아니에요.

   이 스레드는 (죽은 지금) 정말 멋진 물건을 포함한다. 그러나 나는 때문에 "보안 오류"에 FF + 방화 광 3.5b99를 사용하여이 페이지에 바로 그것을 할 수 아니에요.

   YIPEE! 나는 당신을하는 데 도움이 코드 희망으로 전체 오른쪽 사이드를 선택 할 수 있었다 :

       var r = document.createRange();
       var w=document.getElementById("sidebar");  
       r.selectNodeContents(w);  
       var sel=window.getSelection(); 
       sel.removeAllRanges(); 
       sel.addRange(r); 
   

   PS : - 내가 좋아하는 JQuery와 선택기에 의해 반환 된 객체를 사용 할 수 없습니다

      var w=$("div.welovestackoverflow",$("div.sidebar"));
      
      //this throws **security exception**
   
      r.selectNodeContents(w);
   

5. ---

   5.내가 같은 일을 찾고 있었다, 내 솔루션이 있었다 :

   내가 같은 일을 찾고 있었다, 내 솔루션이 있었다 :

   $('#el-id').focus().select();
   

6. ---

   6.당신은 어떤 요소의 콘텐츠를 선택하기 위해 다음과 같은 기능을 사용할 수 있습니다 :

   당신은 어떤 요소의 콘텐츠를 선택하기 위해 다음과 같은 기능을 사용할 수 있습니다 :

   jQuery.fn.selectText = function(){
       this.find('input').each(function() {
           if($(this).prev().length == 0 || !$(this).prev().hasClass('p_copy')) { 
               $('<p class="p_copy" style="position: absolute; z-index: -1;"></p>').insertBefore($(this));
           }
           $(this).prev().html($(this).val());
       });
       var doc = document;
       var element = this[0];
       console.log(this, element);
       if (doc.body.createTextRange) {
           var range = document.body.createTextRange();
           range.moveToElementText(element);
           range.select();
       } else if (window.getSelection) {
           var selection = window.getSelection();        
           var range = document.createRange();
           range.selectNodeContents(element);
           selection.removeAllRanges();
           selection.addRange(range);
       }
   };
   

   이 함수는 다음과 같이 호출 할 수 있습니다 :

   $('#selectme').selectText();
   

7. ---

   7.나는 몇 가지를 제외하고 레페의 답변을 좋아했다 :

   나는 몇 가지를 제외하고 레페의 답변을 좋아했다 :

   저는 여기에 영감을 레페의 대답에 고개를 끄덕, 해낸거야. 나는 확실히 내가 (있는 moreso하지만 난의 탈선이 될 수 사실과)이 아마도 약간의 격을 그대로 조롱 할 것입니다. 그러나 그것은 작동하고 브라우저 스니핑 방지하고 그 지점입니다.

   selectText:function(){
   
       var range,
           selection,
           obj = this[0],
           type = {
               func:'function',
               obj:'object'
           },
           // Convenience
           is = function(type, o){
               return typeof o === type;
           };
   
       if(is(type.obj, obj.ownerDocument)
           && is(type.obj, obj.ownerDocument.defaultView)
           && is(type.func, obj.ownerDocument.defaultView.getSelection)){
   
           selection = obj.ownerDocument.defaultView.getSelection();
   
           if(is(type.func, selection.setBaseAndExtent)){
               // Chrome, Safari - nice and easy
               selection.setBaseAndExtent(obj, 0, obj, $(obj).contents().size());
           }
           else if(is(type.func, obj.ownerDocument.createRange)){
   
               range = obj.ownerDocument.createRange();
   
               if(is(type.func, range.selectNodeContents)
                   && is(type.func, selection.removeAllRanges)
                   && is(type.func, selection.addRange)){
                   // Mozilla
                   range.selectNodeContents(obj);
                   selection.removeAllRanges();
                   selection.addRange(range);
               }
           }
       }
       else if(is(type.obj, document.body) && is(type.obj, document.body.createTextRange)) {
   
           range = document.body.createTextRange();
   
           if(is(type.obj, range.moveToElementText) && is(type.obj, range.select)){
               // IE most likely
               range.moveToElementText(obj);
               range.select();
           }
       }
   
       // Chainable
       return this;
   }
   

   이게 다예요. 당신이 무엇을보고 중 일부는 가독성 및 / 또는 편의를 위해입니다. 오페라, 사파리, 크롬, 파이어 폭스와 IE의 최신 버전 맥에서 테스트. 또한 IE8에서 테스트. 코드 블록 내에서 필요하지만 jslint 제안 할 때 그들은 모두 최고를 선언 할 경우 / 또한 나는 일반적으로 전용 변수를 선언합니다. 확인 jslint.

   편집하다 나는 작전의 코드에이 넥타이를하는 방법을 포함하는 것을 잊었다 :

   function SelectText(element) {
       $("#" + element).selectText();
   }
   

   건배

8. ---

   8.크롬에서 작동하는지 업데이트 된 버전 :

   크롬에서 작동하는지 업데이트 된 버전 :

   function SelectText(element) {
       var doc = document;
       var text = doc.getElementById(element);    
       if (doc.body.createTextRange) { // ms
           var range = doc.body.createTextRange();
           range.moveToElementText(text);
           range.select();
       } else if (window.getSelection) {
           var selection = window.getSelection();
           var range = doc.createRange();
           range.selectNodeContents(text);
           selection.removeAllRanges();
           selection.addRange(range);
   
       }
   }
   
   $(function() {
       $('p').click(function() {
           SelectText("selectme");
   
       });
   });
   

   http://jsfiddle.net/KcX6A/326/

9. ---

   9.모든 태그를 들어 한이 짧고 간단한 코드에 의해 해당 태그 내부의 모든 텍스트를 선택할 수 있습니다. 이 노란 색으로 전체 태그 영역을 강조 표시하고 클릭 한 번에 그 안에 텍스트를 선택합니다.

   모든 태그를 들어 한이 짧고 간단한 코드에 의해 해당 태그 내부의 모든 텍스트를 선택할 수 있습니다. 이 노란 색으로 전체 태그 영역을 강조 표시하고 클릭 한 번에 그 안에 텍스트를 선택합니다.

   document.onclick = function(event) {
       var range, selection;
   event.target.style.backgroundColor = 'yellow';
           selection = window.getSelection();
           range = document.createRange();
           range.selectNodeContents(event.target);
           selection.removeAllRanges();
           selection.addRange(range);
   };
   

10. ---

    10.레페 - 그 날 덕분에 위대한 작품! 나는 여러 사전 태그가 여러 한 페이지에 링크 "모두 선택"하고 강조 올바른 사전을 선택합니다 수 있도록 각 문장과 함께 그것을 사용 후, 플러그인 파일에 코드를 넣어 :

    레페 - 그 날 덕분에 위대한 작품! 나는 여러 사전 태그가 여러 한 페이지에 링크 "모두 선택"하고 강조 올바른 사전을 선택합니다 수 있도록 각 문장과 함께 그것을 사용 후, 플러그인 파일에 코드를 넣어 :

    <script type="text/javascript" src="../js/jquery.selecttext.js"></script>
    <script type="text/javascript">
      $(document).ready(function() { 
            $(".selectText").each(function(indx) {
                    $(this).click(function() {                 
                        $('pre').eq(indx).selText().addClass("selected");
                            return false;               
                        });
            });
      });
    

11. ---

    11.그래서, 나는이 구현을위한 크로스 브라우저 지원이 자바 스크립트 프레임 워크에 대해 알고하지 않습니다. (트라이던트 엔진) 선택 객체 (게코 엔진)과 TextRange 개체에서보세요하지만, 나도 그것을보고 적이 심지어 jQuery를 그것을 가지고 가능성이 있습니다.

    그래서, 나는이 구현을위한 크로스 브라우저 지원이 자바 스크립트 프레임 워크에 대해 알고하지 않습니다. (트라이던트 엔진) 선택 객체 (게코 엔진)과 TextRange 개체에서보세요하지만, 나도 그것을보고 적이 심지어 jQuery를 그것을 가지고 가능성이 있습니다.

12. ---

    12.: 나는 다음 문을 교체 한 후 IE와 FF 모두 사업부의 텍스트를 선택 - 팀의 방법은 내 경우를 위해 완벽하게 작동

    : 나는 다음 문을 교체 한 후 IE와 FF 모두 사업부의 텍스트를 선택 - 팀의 방법은 내 경우를 위해 완벽하게 작동

    range.moveToElementText(text);
    

    다음과 :

    range.moveToElementText(el);
    

    사업부의 텍스트는 다음의 jQuery 기능을 클릭하여 선택 :

    $(function () {
        $("#divFoo").click(function () {
            selectElementText(document.getElementById("divFoo"));
        })
    });
    

13. ---

    13.여기에 문자열의 형태로 텍스트를 선택하려면 또 다른 간단한 해결책이있다, 당신은 당신의 코드에 div 요소의 자식을 추가 할 쉽게 문자열을 사용할 수 있습니다 :

    여기에 문자열의 형태로 텍스트를 선택하려면 또 다른 간단한 해결책이있다, 당신은 당신의 코드에 div 요소의 자식을 추가 할 쉽게 문자열을 사용할 수 있습니다 :

    var text = '';
    
    if (window.getSelection) {
        text = window.getSelection();
    
    } else if (document.getSelection) {
        text = document.getSelection();
    
    } else if (document.selection) {
        text = document.selection.createRange().text;
    }
    
    text = text.toString();
    

14. ---

    14.내 특정 사용 케이스는, 지금까지의 내가 볼 수 있기 때문에, 여기에 대한 답변의에 설명되지 않은 편집 가능한 범위 요소 내에서 텍스트 범위를 선택했다.

    내 특정 사용 케이스는, 지금까지의 내가 볼 수 있기 때문에, 여기에 대한 답변의에 설명되지 않은 편집 가능한 범위 요소 내에서 텍스트 범위를 선택했다.

    가장 큰 차이점은 Range.setStart ()의 문서에 설명 된대로, Range 개체에 텍스트 형식의 노드를 통과해야한다는 것입니다 :

    텍스트 노드가 있으므로를 얻기 위해, 스팬 요소의 액세스 childNodes에 [0] 스팬 요소의 첫 번째 자식 노드이다. 나머지는 대부분의 다른 답변에서와 동일합니다.

    코드 예제 여기 :

    var startIndex = 1;
    var endIndex = 5;
    var element = document.getElementById("spanId");
    var textNode = element.childNodes[0];
    
    var range = document.createRange();
    range.setStart(textNode, startIndex);
    range.setEnd(textNode, endIndex);
    
    var selection = window.getSelection();
    selection.removeAllRanges();
    selection.addRange(range);
    

    기타 관련 문서 : 범위 선택 Document.createRange () Window.getSelection ()

15. ---

    15.크롬은 "경우 다른 사람의"에 jQuery.browser.webkit을 추가했습니다. 크롬 23에서이 작업을 가져올 수 없습니다.

    크롬은 "경우 다른 사람의"에 jQuery.browser.webkit을 추가했습니다. 크롬 23에서이 작업을 가져올 수 없습니다.

    클래스 = "코드"가있는 <전> 태그의 내용을 선택 아래에이 스크립트를했다.

    jQuery( document ).ready(function() {
        jQuery('pre.code').attr('title', 'Click to select all');
        jQuery( '#divFoo' ).click( function() {
            var refNode = jQuery( this )[0];
            if ( jQuery.browser.msie ) {
                var range = document.body.createTextRange();
                range.moveToElementText( refNode );
                range.select();
            } else if ( jQuery.browser.mozilla || jQuery.browser.opera  || jQuery.browser.webkit ) {
                var selection = refNode.ownerDocument.defaultView.getSelection();
                console.log(selection);
                var range = refNode.ownerDocument.createRange();
                range.selectNodeContents( refNode );
                selection.removeAllRanges();
                selection.addRange( range );
            } else if ( jQuery.browser.safari ) {
                var selection = refNode.ownerDocument.defaultView.getSelection();
                selection.setBaseAndExtent( refNode, 0, refNode, 1 );
            }
        } );
    } );
    

16. ---

    16.() 선택의 jQuery를 문서에 따르면 :

    () 선택의 jQuery를 문서에 따르면 :

    JQuery와가 (선택 이유를 설명)이 경우에는하지 않습니다 일이있다.

from https://stackoverflow.com/questions/985272/selecting-text-in-an-element-akin-to-highlighting-with-your-mouse by cc-by-sa and MIT license