In this tutorial we will learn how to create input textbox watermark effect using jQuery and css. You can see its live example textbox watermark effect using jQuery on this blog, check search field box on top right corner.
Lets start…
2) Create CSS class to apply watermark effect
3) jQuery code
Lets start…
1) Add textbox
|
1 |
<input type="text" name="uname" id="uname" value="" /> |
|
1 2 3 |
.lightText{ color : #9B9B9B; } |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
$("#uname").addClass("lightText") // set default value .val("enter your name") // onfocus action .focus(function(){ if($(this).val() == "enter your name"){ $(this).removeClass("lightText").val(""); } // focus lost action }).blur(function(){ if($(this).val() == ""){ $(this).val("enter your name").addClass("lightText"); } }); |
This works great. I modified this code to enable a CF7 form to enable watermarking. Still having some trouble: the default value disappears and doesn’t reappear after the submit button is clicked!
CF7 ?? Is it contact form ?? Do you see any JS error in your firebug console when you click on submit button ??
Amit thanks for the reply but I figured it out using some clever PHP! Thanks again for your post though, I couldn’t have solved the problem without it!
Amit thanks for the reply but I figured it out using some clever PHP! Thanks again for your post though, I couldn’t have solved the problem without it!
can u please explain it how to embed this code in sequence, iwant the behavior as shown in the above name text box
thanks
Ankur, There was little bug i was missing parenthesis, now i have updated the code…can u please follow the tutorial again and check ?
Forgot to mention that you do need to insert a closing parenthesis at the end of line 14 or this will not work!
Thanks Michael, It was truncated…and i didnt noticed it. I have updated the post. many thanks for pointing it 🙂
nice try~
Hi,
I made a plugin called watermarkify for displaying watermarks and added a twitter like animation too. You can check it out at
http://www.ajaybalachandran.com/blog/48/watermarkify-jquery-twitter-like-animated-textfield-watermarks
You can see a demo at:
http://www.ajaybalachandran.com/demo/watermarkify/
thanks mr. amit
hello..
i m applying this code but in my page watermark is not display only tool tip is displaying can u help me..??
Please…
Can you send me the code ? or better you can try HTML5, HTML5 has implemented lot of features so you dont need to use javascript to create watermark effect anymore, have a look at this tut http://www.w3schools.com/tags/att_input_placeholder.asp
Thaxxx…
i got problem ..actually in my site on same page chat code is their so that make problem any solution???
i got the problem on same page chat code also so thats why watermarki not display any solution ???..
Khushali, Sorry but i dint get your problem properly, Can you please elaborate more ??
What’s different with placeholder?
The difference is “awareness”, I had no idea that html5 has something like this 🙂