포커스를 받을 때 텍스트 상자의 모든 내용 선택(Vanilla JS 또는 jQuery)

포커스를 받을 때 텍스트 상자의 모든 내용 선택(Vanilla JS 또는 jQuery)

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

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

<input type="text" onfocus="this.select();" onmouseup="return false;" value="test" />

$(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 Tricks, MDN

이것은 Chrome/Safari만의 문제가 아닙니다.Firefox 18.0.1에서도 비슷한 동작을 경험했습니다.재미있는 점은 이것이 MSIE에서는 일어나지 않는다는 것입니다!여기서의 문제는 입력 내용을 강제로 선택 해제하는 첫 번째 마우스 업 이벤트이므로 첫 번째 발생은 무시하십시오.

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

시간아웃 어프로치로 인해 이상한 동작이 발생하며, 모든 마우스 업 이벤트를 차단하면 입력 요소를 다시 클릭하는 선택 항목을 삭제할 수 없습니다.

HTML:

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

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

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 Number 입력 필드에 문제가 있었습니다.

버튼 중 하나를 클릭한 후 마우스를 버튼 위에 두면 마우스는 버려져 있기 때문에 마우스 버튼을 누른 것처럼 숫자가 계속 바뀝니다.

아래와 같이 마우스 업 핸들러를 즉시 제거하여 이 문제를 해결했습니다.

    $("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에서 테스트 할 기회가 없었습니다.

여기에는 이미 많은 답변이 있다는 것을 알고 있습니다.하지만 이 답변은 아직 없습니다.Ajax 생성 콘텐츠에서도 사용할 수 있는 솔루션입니다.

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

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

포커스가 없는 텍스트 입력을 클릭하면 다음과 같은 이벤트가 발생합니다.

• mousedown: 클릭에 응답합니다.디폴트 처리의 증가focus필요한 경우 를 누르고 선택 시작을 설정합니다.
• focus: 디폴트 처리의 일부로서mousedown.
• mouseup: 클릭 완료. 기본 처리로 선택 종료가 설정됩니다.

이미 포커스가 있는 텍스트 입력을 클릭하면focus이벤트를 건너뜁니다.@Travis와 @Mari가 모두 눈치챘듯이 디폴트 처리에서는mouseup예방할 필요가 있는 것은,focus이벤트가 발생합니다.단, "가 없기 때문에"focus'발생하지 않았다' 사건, 우리는 이것을 추론할 필요가 있다. 우리가 할 수 있는 일은mousedown핸들러

@Mari의 솔루션에서는 jQuery를 Import할 필요가 있습니다.이것을 피하고 싶습니다.@Travis의 솔루션은 이를 위해document.activeElement브라우저에서는 왜 그의 솔루션이 제대로 작동하지 않는지는 모르겠지만 텍스트 입력에 초점이 맞춰져 있는지 추적할 수 있는 다른 방법이 있습니다: 단순히 그 방법을 따르기만 하면 됩니다.focus그리고.blur이벤트입니다.

나에게 유효한 코드는 다음과 같습니다.

  function MakeTextBoxAutoSelect(input)
  {
    var blockMouseUp = false;
    var inputFocused = false;

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

        inputFocused = true;
      };

    input.onblur =
      function ()
      {
        inputFocused = false;
      };

    input.onmousedown =
      function ()
      {
        blockMouseUp = !inputFocused;
      };

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

누군가에게 도움이 되었으면 합니다. :-)

펑션 콜을 몇 개 포함시킴으로써 잭의 답변을 약간 개선할 수 있었습니다.이 답변의 문제는 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>

이것은 잭의 대답보다 약간 개선된 것이다.IE에서는 완벽하게 동작하고, Chrome에서는 전혀 동작하지 않으며, Fire Fox에서는 교대로 동작합니다(말 그대로 격주로 동작).FF나 Chrome에서 안정적으로 동작할 수 있는 방법이 생각나면 공유해 주세요.

어쨌든, 이걸 좀 더 좋게 만들기 위해 내가 할 수 있는 것을 공유해야겠다고 생각했어요.

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

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

onfocus="this.select()"

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

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

(솔직히 왜 다른 게 필요한지 모르겠어요.)

이것은 나에게 효과가 있었다(답장이 아니라 댓글로 게시)

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

onclick="this.focus();this.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, Script Manager를 사용하여 스크립트를 실행할 수 있습니다.C#의 Register Startup Script:

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

따라서 마우스 업은 정상적으로 작동하지만 입력으로 포커스를 받은 후 선택을 취소하지 않습니다.

언급URL : https://stackoverflow.com/questions/480735/select-all-contents-of-textbox-when-it-receives-focus-vanilla-js-or-jquery