Computer >> Máy Tính >  >> Lập trình >> Javascript

Thêm văn bản tìm kiếm mặc định vào hộp tìm kiếm trong HTML với JavaScript?

Bạn có thể sử dụng khái niệm trình giữ chỗ. Sau đây là mã JavaScript -

Ví dụ

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

Để chạy chương trình trên, hãy lưu tên tệp anyName.html (index.html) và nhấp chuột phải vào tệp và chọn tùy chọn mở bằng máy chủ trực tiếp trong trình chỉnh sửa Mã VS.

Đầu ra

Thêm văn bản tìm kiếm mặc định vào hộp tìm kiếm trong HTML với JavaScript?

Khi bạn nhấp vào hộp tìm kiếm, giá trị giữ chỗ sẽ được hiển thị. Ảnh chụp nhanh là asfollows -

Thêm văn bản tìm kiếm mặc định vào hộp tìm kiếm trong HTML với JavaScript?