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

Mất gợi ý nhập liệu (lấy tiêu điểm) sau khi nhấn con trỏ chuột trong hộp văn bản bằng JavaScript

Giả sử sau đây là văn bản đầu vào của chúng tôi -

<label for="name">StudentName:<input name="name" id="studentName"
value="Enter your Name ????" class="guess"></label>

Để mất các gợi ý nhập liệu khi nhấn con trỏ chuột, hãy sử dụng khái niệm onFocus và onBlur.

Ví dụ

<!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>
<label for="name">StudentName:<input name="name" id="studentName"
value="Enter your Name ????" class="guess"></label>
</div>
<script>
   function guessFocus() {
      if (this.value == this.defaultValue)
         this.value = '';
   }
   function guessBlur(event) {
      if (this.value == '')
      this.value = this.defaultValue;
   }
   var event = document.getElementById('studentName');
   event.onfocus = guessFocus;
   event.onblur = guessBlur;
</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. 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

Điều này sẽ tạo ra kết quả sau -

Mất gợi ý nhập liệu (lấy tiêu điểm) sau khi nhấn con trỏ chuột trong hộp văn bản bằng JavaScript

Khi bạn nhấp chuột vào bên trong văn bản, bạn sẽ tập trung và các gợi ý sẽ bị mất. Ảnh chụp màn hình như sau -

Mất gợi ý nhập liệu (lấy tiêu điểm) sau khi nhấn con trỏ chuột trong hộp văn bản bằng JavaScript