- Trending Categories
Data Structure
Networking
RDBMS
Operating System
Java
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Lose input hints (get focus) after pressing mouse cursor in a textbox with JavaScript
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
<!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 −
- Related Articles
- JavaScript Submit textbox on pressing ENTER?
- How to fire after pressing ENTER in text input with HTML?
- Changing the Mouse Cursor in Tkinter
- What is the jQuery Event for user pressing enter in a textbox?
- How to set the type of cursor to display for the mouse pointer with JavaScript?
- How to simulate pressing enter in html text input with Selenium?
- Zoom HTML5 Canvas to Mouse Cursor
- How to create a Textbox with crosshair cursor on moving objects using FabricJS?
- How to create a Textbox with help cursor on moving objects using FabricJS?
- How to create a Textbox with progress cursor on moving objects using FabricJS?
- How to create a Textbox with text cursor on moving objects using FabricJS?
- How to create a Textbox with wait cursor on moving objects using FabricJS?
- Display message when hovering over something with mouse cursor in Tkinter Python
- JavaScript example for Capturing mouse positions after every given interval
- Trigger an event IMMEDIATELY on mouse click, not after I let go of the mouse - JavaScript?

Advertisements