클릭하면 HTML 텍스트 입력에서 모든 텍스트 선택

HTML 웹 페이지에 텍스트 상자를 표시하는 다음 코드가 있습니다.

<input type="text" id="userid" name="userid" value="Please enter the user ID" />

페이지가 표시되면 텍스트 에 사용자 ID를 입력하십시오 메시지가 포함됩니다. 그러나 모든 텍스트를 선택하려면 사용자가 3 번 클릭해야합니다 (이 경우 사용자 ID를 입력하십시오 ).

한 번의 클릭으로 전체 텍스트를 선택할 수 있습니까?

편집하다:

죄송합니다. 말하기를 잊었습니다. 입력을 사용해야합니다 type="text"

이 자바 스크립트 스 니펫을 사용할 수 있습니다.

<input onClick="this.select();" value="Sample Text" />

그러나 분명히 모바일 Safari에서는 작동하지 않습니다. 이 경우 다음을 사용할 수 있습니다.

<input onClick="this.setSelectionRange(0, this.value.length)" value="Sample Text" />

이전에 게시 된 솔루션에는 두 가지 단점이 있습니다.

1. Chrome에서 .select ()를 통한 선택은 그대로 유지되지 않습니다-약간의 시간 초과를 추가하면이 문제가 해결됩니다.
2. 초점을 맞춘 후 원하는 지점에 커서를 놓을 수 없습니다.

다음은 초점을 맞춘 모든 텍스트를 선택하지만 초점을 맞춘 후 특정 커서 포인트를 선택할 수있는 완벽한 솔루션입니다.

        $(function () {
            var focusedElement;
            $(document).on('focus', 'input', function () {
                if (focusedElement == this) return; //already focused, return so user can now place cursor at specific point in input.
                focusedElement = this;
                setTimeout(function () { focusedElement.select(); }, 100); //select all text in any field on focus for easy re-entry. Delay sightly to allow focus to "stick" before selecting.
            });
        });

HTML (페이지에서 작동하려는 모든 입력에 onclick 속성을 넣어야 함)

 <input type="text" value="click the input to select" onclick="this.select();"/>

또는 더 나은 옵션

jQuery (이것은 페이지의 모든 텍스트 입력에 대해 작동하며 HTML을 변경할 필요가 없습니다) :

<script  type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js"></script>  
<script type="text/javascript">
    $(function(){
        $(document).on('click','input[type=text]',function(){ this.select(); });
    });
</script>

나는 이것이 오래되었다는 것을 알고 있지만 가장 좋은 옵션은 placeholder가능한 경우 새로운 HTML 속성을 사용하는 것입니다 .

<input type="text" id="userid" name="userid" placeholder="Please enter the user ID" />

값을 입력하지 않으면 텍스트가 표시되므로 텍스트를 선택하거나 입력을 지울 필요가 없습니다.

나열된 답변은 나에 따라 부분적입니다. Angular와 JQuery 에서이 작업을 수행하는 방법에 대한 두 가지 예를 아래에 연결했습니다.

이 솔루션에는 다음과 같은 기능이 있습니다.

• JQuery, Safari, Chrome, IE, Firefox 등을 지원하는 모든 브라우저에서 작동합니다.
• Phonegap / Cordova : Android 및 IO에서 작동합니다.
• 입력이 다음 번 블러까지 초점을 얻은 후에 만 ​​한 번만 선택한 다음 초점
• 여러 입력을 사용할 수 있으며 고장 나지 않습니다.
• 앵귤러 디렉티브는 단순히 재사용 할 수 있습니다.
• JQuery를 쉽게 수정할 수 있습니다

JQuery : http://plnkr.co/edit/VZ0o2FJQHTmOMfSPRqpH?p=preview

$("input").blur(function() {
  if ($(this).attr("data-selected-all")) {
  //Remove atribute to allow select all again on focus        
  $(this).removeAttr("data-selected-all");
  }
});

$("input").click(function() {
  if (!$(this).attr("data-selected-all")) {
    try {
      $(this).selectionStart = 0;
      $(this).selectionEnd = $(this).value.length + 1;
      //add atribute allowing normal selecting post focus
      $(this).attr("data-selected-all", true);
    } catch (err) {
      $(this).select();
      //add atribute allowing normal selecting post focus
      $(this).attr("data-selected-all", true);
    }
  }
});

각도 : http://plnkr.co/edit/llcyAf?p=preview

var app = angular.module('app', []);
//add select-all-on-click to any input to use directive
app.directive('selectAllOnClick', [function() {
  return {
    restrict: 'A',
    link: function(scope, element, attrs) {
      var hasSelectedAll = false;
      element.on('click', function($event) {
        if (!hasSelectedAll) {
          try {
            //IOs, Safari, thows exception on Chrome etc
            this.selectionStart = 0;
            this.selectionEnd = this.value.length + 1;
            hasSelectedAll = true;
          } catch (err) {
            //Non IOs option if not supported, e.g. Chrome
            this.select();
            hasSelectedAll = true;
          }
        }
      });
      //On blur reset hasSelectedAll to allow full select
      element.on('blur', function($event) {
        hasSelectedAll = false;
      });
    }
  };
}]);

시험:

onclick="this.select()"

그것은 나를 위해 잘 작동합니다.

항상 사용할 수 있습니다 document.execCommand( 모든 주요 브라우저에서 지원됨 )

document.execCommand("selectall",null,false);

현재 포커스가있는 요소에서 모든 텍스트를 선택합니다.

onfocus 이벤트와 함께 입력 자동 초점 :

<INPUT onfocus="this.select()" TYPE="TEXT" NAME="thing" autofocus>

원하는 요소를 선택한 상태에서 양식을 열 수 있습니다. 자동 초점을 사용하여 입력을 입력 한 다음 onfocus 이벤트를 전송하여 텍스트를 선택합니다.

참고 : 를 고려할 때 onclick="this.select()"첫 번째 클릭에서 모든 문자가 선택됩니다. 입력 후 무언가를 편집하고 문자를 다시 클릭하고 싶지만 모든 문자를 다시 선택합니다. 이 문제를 해결하려면 onfocus대신 대신 사용해야 합니다 onclick.

실제로는 사용 onclick="this.select();"하지 말고 함께 사용 disabled="disabled"하지 마십시오. 작동하지 않으므로 여전히 수동으로 선택하거나 여러 번 클릭하여 선택해야합니다. 선택할 컨텐츠 값을 잠 그려면 속성과 결합하십시오 readonly.

Shoban의 대답은 재사용 가능한 버전입니다.

<input type="text" id="userid" name="userid"
 value="Please enter the user ID" onfocus="Clear(this);"
/>

function Clear(elem)
{
elem.value='';
}

이렇게하면 여러 요소에 대해 명확한 스크립트를 재사용 할 수 있습니다.

교체 가능

<input type="text" id="userid" name="userid" value="Please enter the user ID" />

와:

<input type="text" id="userid" name="userid" placeholder="Please enter the user ID" />

플레이스 홀더는 사람들이 여러 번 클릭하거나 ctrl + a를 사용하지 않고 텍스트 상자에 입력 할 수있는 방법으로 값을 바꾸는 데 사용됩니다. 자리 표시자는 값이 아니지만 이름에서 자리 표시자를 제안하는 것처럼 만듭니다. "여기에서 사용자 이름"또는 "이메일"이라고하는 여러 온라인 양식에 사용되며 클릭하면 "이메일"이 사라지고 바로 입력을 시작할 수 있습니다.

당신이 요구 한 것에 대한 정확한 해결책은 다음과 같습니다.

<input type="text" id="userid" name="userid" value="Please enter the user ID" onClick="this.setSelectionRange(0, this.value.length)"/>

그러나 입력에 "사용자 ID를 입력하십시오" 를 자리 표시 자 또는 힌트 로 표시하려고합니다 . 따라서 다음을보다 효율적인 솔루션으로 사용할 수 있습니다.

<input type="text" id="userid" name="userid" placeholder="Please enter the user ID" />

다음은 React의 예이지만 원하는 경우 vanilla JS의 jQuery로 변환 할 수 있습니다.

class Num extends React.Component {

    click = ev => {
        const el = ev.currentTarget;
        if(document.activeElement !== el) {
            setTimeout(() => {
                el.select();    
            }, 0);
        }
    }

    render() {
        return <input type="number" min={0} step={15} onMouseDown={this.click} {...this.props} />
    }
}

여기서의 트릭 은 "click"이벤트가 발생할 때 onMouseDown까지 요소가 이미 포커스 를 받았기 때문에 사용하는 것이므로 activeElement검사가 실패합니다.

activeElement검사는 사용자가 지속적으로 전체 입력을-선택 다시없이 원하는 자신의 커서를 배치 할 필요 그렇다.

브라우저가 커서 위치 확인 후 단어를 수행하는 것처럼 텍스트가 선택되고 즉시 선택 해제되므로 시간 초과가 필요합니다.

마지막으로 React는 이벤트 객체를 재사용하므로 setTimeout이 실행될 때 합성 이벤트가 손실되므로 React 에서el = ev.currentTarget 필요 합니다.

click 이벤트를 잡는 데 따른 문제점은 텍스트 내의 각 후속 클릭이 다시 선택하여 사용자가 커서를 재배치 할 것이라는 점입니다.

나를 위해 일한 것은 변수를 선언하고 selectSearchTextOnClick을 기본값으로 true로 설정하는 것이 었습니다. 클릭 핸들러는 변수가 여전히 true인지 확인합니다. 변수 인 경우 변수를 false로 설정하고 select ()를 수행합니다. 그런 다음 블러 이벤트 핸들러를 사용하여 다시 true로 설정합니다.

지금까지의 결과는 내가 기대하는 행동과 같습니다.

(편집 : 누군가가 제안한대로 초점 이벤트를 잡으려고 시도했지만 작동하지 않는다고 말하지 않았습니다. 초점 이벤트가 발생한 후 클릭 이벤트가 발생하여 텍스트를 즉시 선택 취소 할 수 있습니다).

이 질문에는 모바일 플랫폼에서 .select ()가 작동하지 않는 경우에 대한 옵션이 있습니다 . iOS 장치의 입력 필드에서 프로그래밍 방식으로 텍스트 선택 (모바일 Safari)

이 같은 Html <input type="text" value="click the input to select" onclick="javascript:textSelector(this)"/>

바인드가없는 자바 스크립트 코드

function textSelector(ele){
    $(ele).select();
}

이것은 TextBox의 정상적인 활동입니다.

클릭 1- 초점 설정

2/3 클릭 (더블 클릭)-텍스트 선택

페이지가 처음로드 될 때 TextBox에 포커스 를 설정 하여 "select"를 단일 두 번 클릭 이벤트로 줄입니다.

입력 필드에 "값"대신 "자리 표시 자"를 사용하십시오.

AngularJS를 사용하는 경우 쉽게 액세스 할 수 있도록 사용자 지정 지시문을 사용할 수 있습니다.

define(['angular'], function () {
    angular.module("selectionHelper", [])
    .directive('selectOnClick', function () {
        return {
            restrict: 'A',
            link: function (scope, element, attrs) {                
                element.on('click', function () {
                    this.select();
                });
            }
        };
    });
});

이제 다음과 같이 사용할 수 있습니다.

<input type="text" select-on-click ... />

샘플에는 requirejs가 포함되어 있으므로 다른 것을 사용하는 경우 첫 번째 줄과 마지막 줄을 건너 뛸 수 있습니다.

누구나 jQuery (페이지 검색에 달콤한)로 페이지로드 에서이 작업을 수행하려는 경우 여기 내 솔루션입니다.

jQuery.fn.focusAndSelect = function() {
    return this.each(function() {
        $(this).focus();
        if (this.setSelectionRange) {
            var len = $(this).val().length * 2;
            this.setSelectionRange(0, len);
        } else {
            $(this).val($(this).val());
        }
        this.scrollTop = 999999;
    });
};

(function ($) {
    $('#input').focusAndSelect();
})(jQuery);

이 게시물을 기반으로 합니다 . CSS-Tricks.com 덕분에

사용자가 요소를 선택할 때 대체되는 자리 표시 자 텍스트를 얻으려는 경우 placeholder오늘날 속성 을 사용하는 것이 가장 좋습니다 . 그러나 필드에 포커스가있을 때 현재 값을 모두 선택하려면 @Cory House 및 @Toastrackenigma 답변의 조합이 가장 표준적인 것 같습니다. 현재 포커스 요소를 설정 / 해제하는 핸들러와 함께 사용 focus및 focusout이벤트를 수행하고 포커스가있을 때 모두를 선택하십시오. angular2 / typescript 예제는 다음과 같습니다 (그러나 바닐라 js로 변환하는 것은 쉽지 않습니다).

주형:

<input type="text" (focus)="focus()" (focusout)="focusout()" ... >

구성 요소:

private focused = false;

public focusout = (): void => {
    this.focused = false;
};

public focus = (): void => {
    if(this.focused) return;
    this.focused = true;

    // Timeout for cross browser compatibility (Chrome)
    setTimeout(() => { document.execCommand('selectall', null, false); });
};