Hintify: A small jQuery Plugin

13 Jul 2010

I just published a jQuery plugin to github called hintify.

Hintify is a simple jQuery plugin that makes it easy to add helper texts inside of form inputs. When the user clicks into the field the text disappears and allows the user to type whatever he or she wants. If nothing is typed and the user leaves the field by clicking somewhere else the hint text reappears.

Demo

 

Stuff to try:
  • On focus: Hint disappears and the "hint" class is removed.
  • Leave and it comes back.
  • Type and the text is black instead of gray.
  • Leave the field and what you typed stays there.
  • Delete it all and leave then the hint text comes back.
  • Submit the form and the hints are cleared out first.

Once you've got the scripts included and the styles to your liking it is super easy to add hints to any text inputs. The biggest limitation I've found with this approach is that it won't work on password fields.

Code for Demo

  <html>
  <head>
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
  <script src="/javascripts/jquery.hintify.js" type="text/javascript"></script>
  <script type="text/javascript">
    $(document).ready(function(){
      $('input[data-hint-text]').addClass('hinter');
      $('.hinter').hintify();
      $('form').submit(function(){
        alert('Any fields that had hint text are now empty');
        // normally you wouldn't fill the fields back in 
        // but it seems appropriate for the demo
        $('.hinter').blur();
        return false
      });
    });
  </script>
  <style>
    input.hinter { color: #666; }
    input.hinter.filled { color:#000; }
  </style>
  </head>
  <body>
  <form>
    <div>
      City: <input type="text" name="city[name]" data-hint-text="Phoenix" />
      Population: <input type="text" name="city[population]" data-hint-text="20 million" />
      <input type="submit" value="Test Form">
    </div>
  </form>
  </body>
  </html>