Articles → JQUERY → Watermark Textbox Using Jquery
Watermark Textbox Using Jquery
Steps Of Implementation
- The first line of code checks whether the class of the textbox is water or not. This condition will happen when the page is loaded for the first time or if the user have not entered any text into the textbox.
- The second line of code set the text to blank if you are not making the textbox blank then when you click on the textbox the water mark text will be there.
- In the third point you are removing the class attribute of the textbox, because if you will not remove the class so when the user starts typing the text in the textbox it will show the text in gray color.
- Add nowater class in the textbox to show normal text in the textbox.
- In this line of code we are checking if there is any text entered by the user. If there will be no text then it means that we have to write water mark text.
- Set the title as text of the textbox, the point which I was discussing earlier. The title acts as a storage of the watermark text which we can retrieve later whenever we want.
- If there is no text in the textbox then remove the nowater class.
- Add water class.