Javascript: Creating a Text Watermark

Update: Read about the JQuery version of this text watermark or better yet, check out my lightweight JQuery plugin which handles inputs, textareas, and even passwords!

This post is in response to a request to see how to create a textbox watermark using only text instead of an image. In a previous post, I explained how to use an image for a textbox watermark. Textbox watermarks are fantastic tools you can use to improve the usability of a website, as they give the user guidance on what to enter into the textbox. If you don’t want to use an image as my other post describes, here is how to create a simple watermark using javascript. Before we begin though, see exactly what you are making:


So either in an external Javascript file (which is called the same way as an external CSS file), or in the head of your HTML inside a <script> tag, include the following javascript:

The Javascript:

function watermark(inputId,text){
  var inputBox = document.getElementById(inputId);
    if (inputBox.value.length > 0){
      if (inputBox.value == text)
        inputBox.value = '';
    }
    else
      inputBox.value = text;
}

This javascript function checks if the textbox text isn’t empty, and then determines whether to clear the text or not. It also will put the watermark text back in if the user deletes what they entered or doesn’t enter anything. The function needs to be called in both the onblur and onfocus events of the textbox, which is explained below.

Here is the HTML that goes with the JS:

<input id="inputTextboxId" type="text" value="type here" onfocus="watermark('inputTextboxId','type here');" onblur="watermark('inputTextboxId','type here');" />

That’s all you need! And if you have any questions, don’t hesitate to ask! A question on my image watermark post lead to this post, so you never know!

41 Responses to “Javascript: Creating a Text Watermark”

  1. Narender says:

    Whoa .. A fresh new post for my query …

    I guess … Using text is always a good idea instead of images when we have to show watermark on more than a dozen textboxes on a single page!

    simplest post found on internet for watermark!
    Thanks u so much David !

  2. Amgad says:

    That was very simple to use. Thanks David.

  3. Steve says:

    Wow! easiest and best on the web. Why are all the other solutions so over-the-top complicated? You showed me the simple use of onblur and onfocus.
    (I set darkgrey color to the watermark text – looks good.)

    Thanks for a great solution!

    (I’m an old programmer from way back, but lately getting into JS to maintain my wife’s website).

    Any problems using your code in a commercial application?

    • David says:

      Thanks Steve. The code is free to use wherever you want. You don’t even need to attribute me, as it is relatively basic stuff. Good luck!

  4. Eyal says:

    Great and simple way! but I am trying to do this with ‘textarea’ tag with no success, what do I need to change?

  5. ankur says:

    hey david.. thanks a lot this helped me a lot….

  6. ankur says:

    hey david can u tell how to highlight the text box that is watermarker and how to change its color.

    • David says:

      Surely. Depends on exactly what you want to do, but wherever you change the text, you should also change whatever else it is you need altered (background color, text color, border color). So for example, to change the background color, you’d use the following statement: inputBox.style.background = ‘#444444’;. Don’t forget to change it back as well.

  7. ankur says:

    thanks a lot david, but is that code is to be placed inside the css???

    • David says:

      No, you’d place that statement right below each line where you are changing the value of the textbox. Don’t forget to put curly brackets around your if and else statements if you have more than one line of code.

  8. Josh says:

    inputBox.value.length != 0

    This worked much better for me working around apache tomcat. :3

  9. ankur says:

    thanks a lot david this tutorial helped me a lot. thank u so much …

  10. Andrew says:

    Hey David,

    How would I set it up to do this multiple times in the same form? Even if I repeat the script outside of the the text only disappears in the first box and not the second or third, etc. Any idea?

    • David says:

      You don’t need to repeat the script, because that function should work for as many input fields as you want. You just need to make sure that each input field has a unique ID, and then use that in the onfocus and onblur event function calls. Make sense?

  11. Ben says:

    David, your solution is so much simpler than everyone other one I’ve seen. Thank you! Here’s a headache-inducer: what if you don’t have access to the HTML? I’m using a template contest application controlled with CSS (and js). I can’t change the underlying HTML. Is there a way to insert the onblur and onfocus functions inside an tag?

    • David says:

      Ben, does the template include JQuery? Since I wrote this post, JQuery has become a whole lot more popular, and allows for binding of events to elements without access to the element itself, just by adding in javascript code. If you include the JQuery library, then check out my post on creating a text watermark with JQuery.

  12. Andrew says:

    Perfect David, that worked like a charm. Thanks!

  13. karthik says:

    but this is not working when we manually enter the text. If we enter text “test watermark” code is behaving differently

    • David says:

      You are correct. I simplified this code down to a single function that works for both onfocus and onblur. The sacrifice in this simplified version is the fault that you mentioned, it breaks if someone replicates the actual text watermark. I have a Jquery solution that solves this problem, or you can always break out this javascript into two separate functions to avoid the problem you are speaking of.

      Here’s the JQuery text watermark post.

  14. Narasimha says:

    Nice one!

  15. Ganesh AC says:

    Hi i did for username but when i do it for password, i encounter some problem.. because i set the type=’password’.. can you tell how to write the script for this…Thanks in advance..

  16. Ramesh Byndoor says:

    Nice post this code will not work when somebody try to type watermark text given…

    Suppose you are showing “username” as watermark and if somebody type username.!

  17. Jeevan says:

    Thanks a lot David, the code works great.. 🙂

  18. harry says:

    this watermark is also done on all needed elements by using getElementByclass… how??

    • David says:

      Because you are initializing the onfocus and onblur events for each individual box, trying to do it by class name won’t really save you any code. In theory, on document load, you could run a function that adds the onblur and onfocus events for each individual textbox by using getElementByClassName and running a forEach statement on the resulting array.

  19. savitha says:

    Thanks A Lot It Worked Great

  20. pooja says:

    But my value is dynamic and its not working propery for me then how could i do?

  21. Carlos says:

    Hello! David, many thanks for the code.
    Sorry for my English. I have watermarks on all my textbox but not all are requested. When i post my form a get the watermark values of those texbox.
    Could you help?
    ThankU

  22. Carlos says:

    Thank you David. Works fine.

  23. Raghu says:

    Working fine..Tanx a lot.

  24. Satheesh says:

    Thanks a lot

  25. Tom Auger says:

    Doesn’t this then submit your watermark text if you don’t touch the input field at all? That seems like a pretty big oversimplification doesn’t it?

  26. vishal says:

    hi David…i just want to know if the below code will watermark all the images on my photo gallery web page..i have copied and pasted the code code inside …but not working…please help.

    function watermark(inputId,text){
    var inputBox = document.getElementById(inputId);
    if (inputBox.value.length > 0){
    if (inputBox.value == text)
    inputBox.value = ”;
    }
    else
    inputBox.value = text;
    }

  27. vishal says:

    hi david…thanks for your reply… can u tell me the easiest way to watermark images in a photo gallery.