[javascript] 클릭하면 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" />답변
이전에 게시 된 솔루션에는 두 가지 단점이 있습니다.
- Chrome에서 .select ()를 통한 선택은 그대로 유지되지 않습니다-약간의 시간 초과를 추가하면이 문제가 해결됩니다.
- 초점을 맞춘 후 원하는 지점에 커서를 놓을 수 없습니다.
다음은 초점을 맞춘 모든 텍스트를 선택하지만 초점을 맞춘 후 특정 커서 포인트를 선택할 수있는 완벽한 솔루션입니다.
$(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);현재 포커스가있는 요소에서 모든 텍스트를 선택합니다.
