HTML 검색 상자에 기본 검색 텍스트를 추가하려면 placeholder 개념을 활용할 수 있습니다. placeholder는 입력 필드에 값이 없을 때 힌트 형태로 표시되는 안내 문구로, 사용자에게 어떤 값을 입력해야 하는지 알려주는 역할을 합니다.
다음은 JavaScript 코드 예시입니다.
예제
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=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>
<input type="text" id="textSearch" placeholder="Search the value" />
<script>
var yourText= "John";
var textBoxSearch = document.getElementById("textSearch");
textBoxSearch.value = yourText;
textBoxSearch.onfocus = function() {
if (this.value == yourText) {
this.value = '';
}
}
</script>
</body>
</html>코드 설명
- 입력 필드에는
placeholder="Search the value"속성으로 안내 문구가 지정되어 있습니다. - JavaScript의
yourText변수에 기본값 "John"을 담고, 이를 검색 상자의value에 할당하여 페이지 로드 시 기본 텍스트가 표시되도록 합니다. onfocus이벤트에서 현재 값이 기본값과 같으면 값을 비워서 사용자가 바로 새로운 검색어를 입력할 수 있게 처리합니다.
위 프로그램을 실행하려면 파일 이름을 anyName.html(index.html)로 저장한 후, VS Code 편집기에서 해당 파일을 마우스 오른쪽 버튼으로 클릭하고 Open with Live Server 옵션을 선택하세요.
실행 결과
페이지가 열리면 검색 상자에 기본 텍스트가 표시됩니다. 검색 상자를 클릭하면(포커스가 이동하면) 설정된 값이 지워지고 placeholder로 지정한 안내 문구가 나타납니다. 아래 스냅샷을 참고하세요.
