html 에서 대표적인 입력태그는 input 과 textarea 가 있다. jquery 에서 select 태그는 입력태그에 표시된 문자열을 전체 선택할 수 있도록 한다. 다만 select 메서드는 input과 textarea 태그로 한정되며 다른 태그에는 적용되지 않는다. 문서를 위한 업무용 프로그램에서 자주 사용될 수 있고 사용자가 귀찮은 작업을 조금은 줄일 수 있도록 해주는 역할을 한다.
html 입력 input 태그 전체 선택 ctrl + a 기능 만들기
input textarea 태그 한정
html 태그 중 input 과 textarea 는 텍스트를 입력하는 역할을 한다.
input 태그는 text 속성을 이용한 한줄 텍스트를 입력할 수 있고, textarea 는 여러 줄의 텍스트를 입력할 수 있다.
어떤 사용자는 입력 태그에 나타나는 텍스트를 전체 복사하고 붙여넣기 하기도 한다.
업무를 위한 것일 수도 있고, 입력된 텍스트를 다시 편집하기 위한 것일 수도 있다.
자바스크립트에서 입력 태그에 나타난 텍스트를 전체 복사하는 것은 ctrl + a 를 사용할 수 있지만, 어떤 경우는 버튼을 이요한 전체선택이 필요한 경우가 있다.
스크롤이 불편할 수 있기 때문이다.
select 메서드
select 메서드는 지정된 html 객체의 내용을 선택하는 역할을 한다.
jquery 에서 html 객체를 지정한 후 단순히 select 메서드만 동작하도록 하면 된다.
하지만 select 메서드는 input 태그와 textarea 태그만 사용할 수 있도록 한정되어 있다.
아래는 select 메서드를 사용하는 방법을 나타낸다.
$(input).select();
$(textarea).select();코드 보기 및 결과
아래는 위의 select 메서드에 대한 전체 코드이다.
select 메서드가 input 태그와 textarea 태그에 한정되어 있다는 것을 상기하자.
코드에 대한 설명은 다음과 같다.
웹페이지가 처음 로드되면서 객체로 사용하기 위한 input 태그와 textarea를 찾는다.
초기 텍스트값을 지정하고 클릭 이벤트를 설정하여 입력 태그를 클릭했을 때 전체 선택이 되도록 하였다.
<!-- html5 웹문서 명시 -->
<!DOCTYPE html>
<html lang="ko">
<head>
<!-- 반응형 meta 명시 -->
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div id="container">
<div>
<input type="text" name="txt1" />
</div>
<div>
<textarea name="textarea1"></textarea>
</div>
</div>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(document).ready( function() {
/* without resources */
});
$(window).on('load', function() {
/* with resources */
var $tmpObj = null;
$tmpObj = $("input[name=\"txt1\"]");
$tmpObj.val("abcd");
$tmpObj.click(function () {
this.select();
});
$tmpObj = $("textarea[name=\"textarea1\"]");
$tmpObj.val("abcd");
$tmpObj.click(function () {
this.select();
});
});
</script>
</html>위의 코드에 대한 결과 화면은 아래와 같다.
input 태그를 클릭했을 때 또는 textarea 태그를 클릭했을 때 전체선택이 되는 것을 볼 수 있다.
'programming > TroubleShootInG' 카테고리의 다른 글
| 썸머노트 위지윅 에디터 설치하기 summernote wysiwyg editor (0) | 2022.12.06 |
|---|---|
| 자바스크립트 동기 비동기 동작 방식 이해 (0) | 2022.12.05 |
| html 태그 name 선택과 접근 document 객체 jquery 비교 (0) | 2022.12.01 |
| TOAST UI Editor / 토스트 ui 에디터 html 설정하기 setHTML 메서드 사용하기 (0) | 2022.11.29 |
| html 태그 요소를 자바스크립트 함수 파라미터로 사용하기 함수의 인자값으로 사용하기 (0) | 2022.11.28 |
댓글