[javascript] 포커스를 받으면 텍스트 상자의 모든 내용을 선택하십시오 (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 트릭 , 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()}
/>