JQuery Textbox Hint

In most of the websites, you might notice textboxes with gray text inside which explains what is it for, and when you focus on the textbox it disappears and reappears when you leave the empty textbox.

To achieve this, what i do is:
– get the hint text from title attribute of textbox.
– Show hint text when textbox is empty and not in focus.
– Hide hint text when input box has the focus and title attribute matches input text.

See live Demo here and view the source if you’d like.

Let us take a sample HTML

Call the textbox hint function

Here is the textboxHint function, it will take the input boxes container id and you can pass options like input box selector within a container and blur class. options parameter is optional, default selector is input:text[title] means input boxes which has title attributes and blur class is “blur“.

Here is the blur css that you can add in the head tag.

Comments

  1. By Alfred

    Reply

  2. By Alfred

    Reply

    • By deepanshu

      Reply

  3. By shpat

    Reply

  4. By kwesi

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *

Bitnami