네, JavaScript의 select() 메서드를 사용하면 텍스트 상자를 손쉽게 선택할 수 있습니다. 이 메서드는 입력 필드 내부의 텍스트 전체를 한 번에 하이라이트 처리해 주기 때문에, 사용자가 기존 값을 빠르게 수정하거나 복사할 수 있도록 유도하는 UX 측면에서도 매우 유용합니다.
텍스트 입력 필드 만들기
먼저 간단한 텍스트 입력 필드와 버튼을 생성해 보겠습니다.
Enter your Name:<input type="text" id="txtName" value="John"> <br> <button type="button" onclick="check()">Select Text Box</button>
위 코드에서는 id가 txtName인 텍스트 입력 필드와, 클릭 시 check() 함수를 호출하는 버튼을 배치했습니다. 이제 버튼을 클릭했을 때 텍스트 상자를 선택하도록 구현해 보겠습니다.
전체 예제 코드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initialscale=1.0">
<title>Document</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
Enter your Name:<input type="text" id="txtName" value="John">
<br>
<button type="button" onclick="check()">Select Text Box</button>
<script>
function check(){
document.getElementById("txtName").select();
}
</script>
</body>
</html>핵심 로직 설명
이 예제의 핵심은 다음 한 줄입니다.
document.getElementById("txtName").select();getElementById()로 해당 입력 요소를 가져온 뒤, HTML DOM에서 기본 제공되는 select() 메서드를 호출하면 됩니다. 별도의 라이브러리나 복잡한 설정 없이 순수 JavaScript만으로 동작합니다.
프로그램 실행 방법
위 프로그램을 실행하려면 파일 이름을 “anyName.html(index.html)”로 저장한 후, 파일을 마우스 오른쪽 버튼으로 클릭하세요. 그다음 VS Code 편집기에서 “Open with Live Server” 옵션을 선택하면 브라우저에서 바로 결과를 확인할 수 있습니다.
실행 결과
프로그램을 실행하면 아래와 같은 화면이 출력됩니다.
여기서 “Select Text Box” 버튼을 클릭하면 텍스트 상자가 자동으로 선택됩니다. 결과는 다음과 같습니다.
버튼 클릭 한 번으로 입력 필드 안의 “John”이라는 텍스트 전체가 하이라이트된 것을 확인할 수 있습니다. 이처럼 select() 메서드를 활용하면 검색 폼, 수정 폼 등에서 사용자 경험을 크게 개선할 수 있습니다.