포커스를 받으면 텍스트 상자의 모든 내용을 선택하십시오 (Vanilla JS 또는 jQuery)

텍스트 상자에 포커스가있을 때 텍스트 상자의 모든 내용을 선택하는 Vanilla JS 또는 jQuery 솔루션은 무엇입니까?

$(document).ready(function() {
    $("input:text").focus(function() { $(this).select(); } );
});

$(document).ready(function() {
  $("input[type=text]").focus().select();
});

$(document).ready(function() {
    $("input:text")
        .focus(function () { $(this).select(); } )
        .mouseup(function (e) {e.preventDefault(); });
});

jQuery는 경우에 따라 사용하기 쉬운 JavaScript가 아닙니다.

이 예를보십시오 :

<textarea rows="10" cols="50" onclick="this.focus();this.select()">Text is here</textarea>

출처 : CSS 트릭 , MDN

이것은 Chrome / Safari 문제가 아니며 Firefox 18.0.1과 매우 유사한 동작을 경험했습니다. 재미있는 부분은 이것이 MSIE에서 발생하지 않는다는 것입니다! 여기서 문제 는 입력 내용을 강제로 선택 해제 하는 첫 번째 mouseup 이벤트이므로 첫 번째 발생은 무시하십시오.

$(':text').focus(function(){
    $(this).one('mouseup', function(event){
        event.preventDefault();
    }).select();
});

timeOut 접근 방식은 이상한 동작을 유발하며 모든 mouseup 이벤트를 차단하면 입력 요소를 다시 클릭하여 선택 항목을 제거 할 수 없습니다.

HTML :

Enter Your Text : <input type="text" id="text-filed" value="test">

JS 사용 :

var textFiled = document.getElementById("text-filed");
textFiled.addEventListener("focus", function() { this.select(); });

JQuery 사용 :

$("#text-filed").focus(function() { $(this).select(); } );

React JS 사용 :

렌더 기능 내부의 각 구성 요소에서-

<input
  type="text"
  value="test"
  onFocus={e => e.target.select()}
/>

내 해결책은 시간 초과를 사용하는 것입니다. 작동하는 것 같습니다

$('input[type=text]').focus(function() {
    var _this = this;
    setTimeout(function() {
        _this.select();
    }, 10);
});

이것은 iOS에서도 작동합니다.

<input type="text" onclick="this.focus(); this.setSelectionRange(0, 9999);" />

https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/select

인라인 코드가 나쁜 스타일이라는 것을 알고 있지만 이것을 .js 파일에 넣고 싶지 않았습니다. jQuery없이 작동합니다!

<input type="text" value="blah blah" onfocus="this.select(); this.selAll=1;" onmouseup="if(this.selAll==0) return true; this.selAll=0; return false;"></input>

여기에 대한 답변은 어느 시점까지 도움이되었지만 Chrome에서 위 / 아래 버튼을 클릭 할 때 HTML5 숫자 입력 필드에 문제가있었습니다.

단추 중 하나를 클릭하고 단추 위에 마우스를 놓으면 마우스가 버려 져서 마우스 단추를 누른 것처럼 숫자가 계속 변경됩니다.

아래처럼 트리거 된 즉시 mouseup 핸들러를 제거 하여이 문제를 해결했습니다.

    $("input:number").focus(function () {
        var $elem = $(this);
        $elem.select().mouseup(function (e) {
            e.preventDefault();
            $elem.unbind(e.type);
        });
    });

이것이 미래 사람들에게 도움이되기를 바랍니다 ...

이 작동합니다, 이것을보십시오-

<input id="textField1" onfocus="this.select()" onmouseup="return false" /> 

Safari / IE 9 및 Chrome에서 작동하지만 Firefox에서 테스트 할 기회는 없었습니다.

나는 여기에 이미 많은 답변이 있다는 것을 알고 있습니다. 그러나 이것은 지금까지 누락되었습니다. 아약스 생성 콘텐츠와 함께 작동하는 솔루션 :

$(function (){
    $(document).on("focus", "input:text", function() { 
        $(this).select(); 
    });
});

몇 가지 함수 호출을 통합하여 Zach의 답변을 약간 향상시킬 수있었습니다. 이 답변의 문제점은 onMouseUp을 완전히 비활성화하여 포커스가 있으면 텍스트 상자를 클릭하지 못하게한다는 것입니다.

내 코드는 다음과 같습니다.

<input type="text" onfocus="this.select()" onMouseUp="javascript:TextBoxMouseUp();" onMouseDown="javascript:TextBoxMouseDown();" />

<script type="text/javascript">
    var doMouseUp = true;
    function TextBoxMouseDown() {
        doMouseUp = this == document.activeElement;
        return doMouseUp;
    }
    function TextBoxMouseUp() {
        if (doMouseUp)
        { return true; }
        else {
            doMouseUp = true;
            return false;
        }
    }
</script>

이것은 Zach의 대답보다 약간 개선되었습니다. IE에서 완벽하게 작동하고 Chrome에서 전혀 작동하지 않으며 FireFox에서 번갈아 성공합니다 (매년마다). 누군가 FF 또는 Chrome에서 안정적으로 작동하는 방법에 대한 아이디어가 있다면 공유하십시오.

어쨌든, 나는 이것을 조금 더 멋지게 만들 수있는 것을 나눌 것이라고 생각했습니다.

@Travis 및 @Mari와 마찬가지로 사용자가 클릭했을 때 자동 선택을 원했습니다. 이는 mouseup이벤트 의 기본 동작을 방지하지만 사용자가 클릭하지 못하게하는 것을 의미합니다. IE11, Chrome 45, Opera 32 및 Firefox 29 (현재 설치된 브라우저)에서 작동하는 솔루션은 마우스 클릭과 관련된 일련의 이벤트를 기반으로합니다.

초점이없는 텍스트 입력을 클릭하면 다음과 같은 이벤트가 나타납니다.

• mousedown: 클릭에 대한 응답으로. focus필요한 경우 기본 처리가 발생하고 선택 시작이 설정됩니다.
• focus:의 기본 처리의 일부로 mousedown.
• mouseup: 클릭이 완료되면 기본 처리에서 선택 종료가 설정됩니다.

이미 포커스가있는 텍스트 입력을 클릭하면 focus이벤트를 건너 뜁니다. @Travis와 @Mari가 모두 알 수 있듯이 기본 이벤트 처리 mouseup는 focus이벤트가 발생하는 경우에만 방지해야 합니다. 그러나 " focus발생하지 않음"이벤트가 없으므로 mousedown처리기 내에서 수행 할 수있는이를 추론해야 합니다.

@Mari의 솔루션을 사용하려면 jQuery를 가져와야하므로 피하고 싶습니다. @Travis의 솔루션은를 검사하여이를 수행 document.activeElement합니다. 나는 그의 해결책은 브라우저에서 작동하지 않는 이유는 정확히 모르겠지만, 텍스트 입력 포커스가 있는지 여부를 추적 할 수있는 또 다른 방법이있다 : 단순히 따라가 focus와blur 이벤트를.

나를 위해 작동하는 코드는 다음과 같습니다.

    var blockMouseUp = false;
    var customerInputFocused = false;

    txtCustomer.onfocus =
      function ()
      {
        try
        {
          txtCustomer.selectionStart = 0;
          txtCustomer.selectionEnd = txtCustomer.value.length;
        }
        catch (error)
        {
          txtCustomer.select();
        }

        customerInputFocused = true;
      };

    txtCustomer.onblur =
      function ()
      {
        customerInputFocused = false;
      };

    txtCustomer.onmousedown =
      function ()
      {
        blockMouseUp = !customerInputFocused;
      };

    txtCustomer.onmouseup =
      function ()
      {
        if (blockMouseUp)
          return false;
      };

나는 이것이 누군가에게 도움이되기를 바랍니다. :-)

onclick="this.focus();this.select()"

텍스트 상자에 포커스가 있을 때 텍스트 상자의 모든 내용을 선택 하는 JavaScript 또는 jQuery 솔루션은 무엇입니까 ?

다음 속성 만 추가하면됩니다.

onfocus="this.select()"

예를 들면 다음과 같습니다.

<input type="text" value="sometext" onfocus="this.select()">

(정직하게도 왜 다른 것이 필요한지 전혀 모르겠습니다.)

이것은 나를 위해 일했습니다 (답이 아닌 의견이므로 게시)

 $("#textBox").focus().select();

$('input').focus(function () {
    var self = $(this);
    setTimeout(function () {
        self.select();
    }, 1);        
});

편집 : @DavidG의 요청에 따라 왜 이것이 효과가 있는지 잘 모르겠 기 때문에 세부 정보를 제공 할 수는 없지만 포커스 이벤트가 위 또는 아래로 전파되거나 포커스가 발생하는 것과 관련이 있고 입력 요소가 알림을받는 것과 관련이 있다고 생각합니다. 초점을 받았습니다. 시간 초과를 설정하면 요소가 완료되었음을 알 수 있습니다.

이벤트를 함께 연결하면 사용할 필요가 없다고 생각합니다. .one 이 스레드의 다른 곳에서 제안한대로 .

예:

$('input.your_element').focus( function () {
    $(this).select().mouseup( function (e) {
        e.preventDefault();
    });
});

참고 : ASP.NET에서 프로그래밍하는 경우 C #에서 ScriptManager.RegisterStartupScript를 사용하여 스크립트를 실행할 수 있습니다.

ScriptManager.RegisterStartupScript(txtField, txtField.GetType(), txtField.AccessKey, "$('#MainContent_txtField').focus(function() { $(this).select(); });", true );

또는 다른 답변에서 제안 된 HTML 페이지에 스크립트를 입력하십시오.

나는이 곳을 뿌려 완벽하게 작동합니다!

            $('input').on('focus', function (e) {
                $(this)
                $(element).one('mouseup', function () {
                        $(this).select();
                        return false;
                    })                        .select();
            });

나는 파티에 늦었지만 IE11, Chrome, Firefox에서 마우스 업을 방해하지 않고 JQuery없이 완벽하게 작동합니다.

inputElement.addEventListener("focus", function (e) {
    var target = e.currentTarget;
    if (target) {
        target.select();
        target.addEventListener("mouseup", function _tempoMouseUp(event) {
            event.preventDefault();
            target.removeEventListener("mouseup", _tempoMouseUp);
        });
    }
});

내 해결책은 다음입니다.

var mouseUp;
$(document).ready(function() {
    $(inputSelector).focus(function() {
        this.select();
    }) 
    .mousedown(function () {
        if ($(this).is(":focus")) {
          mouseUp = true;
        }
        else {
          mouseUp = false;
        }
     })
     .mouseup(function () {
        return mouseUp;
     });
});

따라서 mouseup은 정상적으로 작동하지만 입력으로 초점을 얻은 후에 선택을 해제하지 않습니다.