

- Trending Categories
Data Structure
Networking
RDBMS
Operating System
Java
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
- 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 Questions & Answers
- JavaScript Submit textbox on pressing ENTER?
- How to fire after pressing ENTER in text input with HTML?
- What is the jQuery Event for user pressing enter in a textbox?
- Changing the Mouse Cursor in Tkinter
- Zoom HTML5 Canvas to Mouse Cursor
- How to simulate pressing enter in html text input with Selenium?
- How to set the type of cursor to display for the mouse pointer with JavaScript?
- Display message when hovering over something with mouse cursor in Tkinter Python
- JavaScript focus
- JavaScript example for Capturing mouse positions after every given interval
- How to clear an input field on focus with CSS?
- Trigger an event IMMEDIATELY on mouse click, not after I let go of the mouse - JavaScript?
- How to output JavaScript into a Textbox?
- How to set focus on a text input in a list with AngularJS and HTML5
- Why do I lose focus when I try to work while putting on headphones?
Advertisements