jQuery-텍스트 영역에서 모든 텍스트를 선택하십시오.


130

텍스트 영역 내부를 클릭하면 전체 내용이 선택되도록하려면 어떻게해야합니까?

결국 다시 클릭하면 선택을 취소합니다.



5
@Blender : 아니요,이 질문은 텍스트 영역이 아닌 요소의 텍스트를 강조 표시하는 것과 관련이 있습니다. 둘은 상당히 다릅니다.
Tim Down

답변:


194

마우스를 사용하여 캐럿을 움직일 때마다 전체 텍스트가 선택 될 때 사용자가 성가신 것을 막으려면 focus이벤트가 아닌 이벤트를 사용하여 수행해야합니다 click. 다음은 작업을 수행하고 가장 간단한 버전 (예 : 이벤트 핸들러 select()에서 텍스트 영역의 메서드를 호출하는 것 focus)이 작동 하지 못하게하는 Chrome의 문제를 해결 합니다.

jsFiddle : http://jsfiddle.net/NM62A/

암호:

<textarea id="foo">Some text</textarea>

<script type="text/javascript">
    var textBox = document.getElementById("foo");
    textBox.onfocus = function() {
        textBox.select();

        // Work around Chrome's little problem
        textBox.onmouseup = function() {
            // Prevent further mouseup intervention
            textBox.onmouseup = null;
            return false;
        };
    };
</script>

jQuery 버전 :

$("#foo").focus(function() {
    var $this = $(this);
    $this.select();

    // Work around Chrome's little problem
    $this.mouseup(function() {
        // Prevent further mouseup intervention
        $this.unbind("mouseup");
        return false;
    });
});

10
포커스 또는 클릭 이벤트에서 텍스트를 자동으로 선택하는 것이 실제로 성가 시므로 별도의 "모든 텍스트 선택"버튼을 사용하여이 기능을 구현하는 것이 좋습니다.
RobG

2
이것은 Chrome에서 나에게 실패합니다. 작동 솔루션은 다음과 같습니다. stackoverflow.com/a/6201757/126600
zack

@ zack :이 답변의 jsFiddle 예제는 Chrome에서 효과적입니다. 당신을 위해하지 않습니까? 귀하가 연결 한 답변이 더 무모하다는 데 동의합니다.
Tim Down

@TimDown : 당신은 맞습니다. 약간 열심이었습니다. 실제로 '클릭'에서 올바르게 작동하지만 tab텍스트 영역으로 들어가면 실패합니다 -다른 솔루션은 두 경우 모두 작동합니다 :)
zack

위의 코드를 약간 변경하면 매력처럼 작동 합니다. 전체 경로로 참조 $("#foo").mouseup(function() { $("#foo").unbind("mouseup"); return false; }); 하지 않고 텍스트 상자를 참조해야합니다 this.
pratikabu

14

탭 및 크롬 문제에 대한 솔루션과 새로운 jquery 방법으로 더 나은 방법

$("#element").on("focus keyup", function(e){

        var keycode = e.keyCode ? e.keyCode : e.which ? e.which : e.charCode;
        if(keycode === 9 || !keycode){
            // Hacemos select
            var $this = $(this);
            $this.select();

            // Para Chrome's que da problema
            $this.on("mouseup", function() {
                // Unbindeamos el mouseup
                $this.off("mouseup");
                return false;
            });
        }
    });

11

나는 이것을 사용하여 끝났다.

$('.selectAll').toggle(function() {
  $(this).select();
}, function() {
  $(this).unselect();
});

그러나 텍스트가 이미 선택되어 있는지 확인하는 방법을 모르므로 두 가지 동작을 취소 할 수 있습니다. (
Alex

1
@ 알렉스 : 내가 너라면 너무 엉망이되지 않습니다. 사용자는 텍스트 영역에서 표준 동작을 기대합니다.
Tim Down

아니요,이 특정 텍스트 영역은 복사하여 붙여 넣기만을위한 것입니다. 그 안에있는 모든 텍스트는 완전히 대체되거나 클립 보드에 복사 될 수있는 큰 암호화 된 문자열입니다.
Alex

@Alex : 아 맞아. readonly그런 다음 속성을 추가하여 읽기 전용으로 만들 수 있습니다 .
Tim Down

1
@Hollister : 아니요. 사용자 또는 스크립트가 div 내에서 콘텐츠를 완벽하게 선택할 수 있습니다. 클립 보드로 복사하려고 할 것입니다. ZeroClipboard와 같은 Flash 기반 라이브러리가없는 스크립트에서는 불가능합니다.
Tim Down

6
$('textarea').focus(function() {
    this.select();
}).mouseup(function() {
    return false;
});

5

약간 더 짧은 jQuery 버전 :

$('your-element').focus(function(e) {
  e.target.select();
  jQuery(e.target).one('mouseup', function(e) {
    e.preventDefault();
  });
});

크롬 코너 케이스를 올바르게 처리합니다. 예는 http://jsfiddle.net/Ztyx/XMkwm/ 을 참조하십시오 .


4

요소에서 텍스트 선택 (마우스로 강조 표시와 유사)

:)

해당 게시물에 허용 된 답변을 사용하여 다음과 같이 함수를 호출 할 수 있습니다.

$(function() {
  $('#textareaId').click(function() {
    SelectText('#textareaId');
  });
});

이 질문을 중복으로 표시하는 것이 더 유용 할 수 있습니다. 실제로 귀하의 답변이 아니므로 두 질문을 병합하는 것이 좋습니다.
Blender

동의-OP는 그녀의 구현에 대한 추가 설명으로 이점을 얻을 수 있지만. :)
토드

이 질문은 텍스트 영역이 아닌 요소에서 텍스트를 강조 표시하는 것과 관련이 있습니다. 둘은 상당히 다릅니다.
팀 다운

고마워, 나는 이것을 할 수 있음을 알았다. $(this).select()코드가 적기 때문에 그것을 사용할 것이다 :)
Alex
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.