Lose input hints (get focus) after pressing mouse cursor in a textbox with JavaScript

Javascript Web Development Object Oriented Programming

Let’s say the following is our input text −

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

To lose input hints on pressing mouse cursor, use onFocus and onBlur concept.

Example

Live Demo

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

To run the above program, save the file name “anyName.html(index.html)” and right click on the file. Select the option “Open with Live Server” in VS Code editor.

Output

This will produce the following output −

When you click the mouse inside the text, you will get focus and hints would lost. The screenshot is as follows −

AmitDiwan

Published on 01-Sep-2020 12:26:09

Previous Page Print Page