Computer >> 컴퓨터 >  >> 프로그램 작성 >> JavaScript

JavaScript를 사용하여 HTML의 검색 상자에 기본 검색 텍스트를 추가하시겠습니까?

<시간/>

자리 표시자의 개념을 사용할 수 있습니다. 다음은 자바스크립트 코드입니다 -

예시

<!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>

위의 프로그램을 실행하려면 파일 이름을 anyName.html(index.html)로 저장하세요. 파일을 마우스 오른쪽 버튼으로 클릭하고 VS Code 편집기에서 라이브 서버로 열기 옵션을 선택합니다.

출력

JavaScript를 사용하여 HTML의 검색 상자에 기본 검색 텍스트를 추가하시겠습니까?

검색 상자를 클릭하면 자리 표시자 값이 표시됩니다. 스냅샷은 다음과 같습니다 -

JavaScript를 사용하여 HTML의 검색 상자에 기본 검색 텍스트를 추가하시겠습니까?