Very simple textbox watermark using JQuery 15
If you haven’t heard about JQuery by now, I strongly suggest you go check it out. It is a very powerful cross-browser JavaScript library that simplifies a lot of the script I have to write, and even more interesting is the fact that Microsoft is going to start distributing it as well with Visual Studio and ASP .NET MVC. I had a post very similar to this one on my blog before, but since it got lost, I decided to go ahead and post it again, slightly improved over the last version.
The idea here is to be simple, and do this in just a few lines of JavaScript. I’m not here to teach all of the intricacies of JQuery, as that can best be explained by the documentation on their website.
I’ll start by displaying the HTML element that we will be manipulating:
1 | <input type="text" id="textBox1" class="watermarkOn" value="Type here" /> |
The CSS class on that element is really simple and defines the look of the textbox when the watermark is active:
Now to write the script that does all of the action. I will assume that you’ve already set up the JavaScript include for JQuery on the page:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 | $(document).ready(function() { // Define what happens when the textbox comes under focus // Remove the watermark class and clear the box $("#textBox1").focus(function() { $(this).filter(function() { // We only want this to apply if there's not // something actually entered return $(this).val() == "" || $(this).val() == "Type here" }).removeClass("watermarkOn").val(""); }); // Define what happens when the textbox loses focus // Add the watermark class and default text $("#textBox1").blur(function() { $(this).filter(function() { // We only want this to apply if there's not // something actually entered return $(this).val() == "" }).addClass("watermarkOn").val("Type here"); }); }); |
And that’s all there is to it! If you’re using this on your site, you’ll probably want to do a bit more customization and such, but these are the basics. I skimmed over a lot of the fine details, I know, but there really isn’t much more to it than this.
This tutorial is very useful. Thanks.
[...] a previous post I talked about how you can do a textbox watermark very easily using JQuery. I’m long overdue in [...]
Thanks pal! this was a nice a simple solution. I prefer this over those bloated “plugins”.
This was pretty easy. I wrapped it as a function to make it more simple along with the intialited text instead of adding in the html.
function addWaterMark(textbox, watermarktext) {
$(textbox).addClass(“watermark”).val(watermarktext);
$(textbox).focus(function() {
$(this).filter(function() {
return $(this).val() == “” || $(this).val() == watermarktext
}).removeClass(“watermark”).val(“”);
});
$(textbox).blur(function() {
$(this).filter(function() {
return $(this).val() == “”
}).addClass(“watermark”).val(watermarktext);
});
}
Very Handy Tutorial and Good function by vijai
Hi all,
I have convert it to a plugin so you can call as follow
$(‘#textbox1′).watermark(‘Enter text’);
The plugin code is as follow
$.fn.watermark = function(opts) {
return this.each(function(){
var sValue = ‘Text Here’;
if (typeof opts != ‘undefined’)
sValue = opts;
var obj = $(this);
obj.addClass(“watermarkOn”).val(sValue);
obj.focus(function() {
$(this).filter(function() {
// We only want this to apply if there’s not
// something actually entered
return $(this).val() == “” || $(this).val() == sValue;
}).removeClass(“watermarkOn”).val(“”);
});
obj.blur(function() {
$(this).filter(function() {
// We only want this to apply if there’s not
// something actually entered
return $(this).val() == “”
}).addClass(“watermarkOn”).val(sValue);
});
});
};
Enjoy!
@EvX and everyone,
EvX, your function works, mostly. (Foremost, thx for the function…)
Issue:
When pressing TAB in textbox_A to move textbox_B, textbox_B does have the css class watermarkON removed, however textbox_B does not actually have typing focus. That is, I can type, but no text is entered into textbox_B.
If I press ENTER/RETURN in textbox_A which then goes to textbox_B, then, yes, textbox_B both has focus and when I type text is entered into textbox_B.
Workaround:
Add $(“#textbox_A”).keyDown (in the .js file for that page) to handle the tab keyCode and move / set focus to textbox_B.
$(“#textbox_A”).keydown(function(event) {
if (HandleTabOrEnter(event, “#textbox_B”)) { return; }
});
Any insights as to how to pass the TAB within your function is appreciated
Very Very useful. Thanks
[...] Ref: http://cysemic.com/2008/12/very-simple-textbox-watermark-using-jquery/ [...]
[...] http://cysemic.com/2008/12/very-simple-textbox-watermark-using-jquery/ I have included this as part of the HtmlExtension utility [...]
Very usefull, thanks
Hi
There is an issue in this method. run the page and write “Type here” in the textbox and then click on any other location and then again click on the textbox the text you have entered will be lost.
Regards
Karan
Hi,
I was reading your article and I would like to appreciate you for making it very simple and understandable. This article gives me a basic idea of watermark functionality in textbox by jquery and it will help me a lot.
Check following link too it might be helpful.
http://mindstick.com/Blog/136/Using watermark functionality in textbox by JQuery
Thank you very much!
watermark focus-off style problem
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
when the text box looses the .FOCUS(), text-box don’t acquire the .watermarkOn class. for the fixed style of watermark
replace the .addclass() & removeClass() with
.toggleClass(“watermarkOn”)
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
total code
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
$(“#textBox1″).focus(function() {
$(this).filter(function() {
// We only want this to apply if there’s not
// something actually entered
return $(this).val() == “” || $(this).val() == “Type here”
}).toggleClass(“watermarkOn”).val(“”);
});
// Define what happens when the textbox loses focus
// Add the watermark class and default text
$(“#textBox1″).blur(function() {
$(this).filter(function() {
// We only want this to apply if there’s not
// something actually entered
return $(this).val() == “”
}).toggleClass(“watermarkOn”).val(“Type here”);
});
ghhhhhhhhh