Suggesting input - a jQuery snippet Graceful degrading javascript

An article, posted about 9 years ago filed in , , , & .

Today I’d like to share with you a snippet that simply uses the ‘title’ value of an input to make a suggestion. It degrades nicely, also users with Javascript turned off are able to get the hint, by hovering over.

 
$('input[title]')
    .val(
      function(i,value) {
        return value == "" ? $(this).attr("title") : value;
      })
    .focus(
      function() {
        if ($(this).attr("title") == $(this).val()) $(this).val(""); 
      }
    );
    // added: don't submit the suggested values
    $('form').submit(function() {
      $('input[title]').val(
        function(i,value) {
          return value == $(this).attr("title") ? "" : value;
        }
      );
      
    });

For optimal userfriendlyness, make the suggested input a little less dark than the user filled in ones.

BTW. It assumes you are already using the jQuery library.

Op de hoogte blijven?

Maandelijks maak ik een selectie artikelen en zorg ik voor wat extra context bij de meer technische stukken. Schrijf je hieronder in:

Mailfrequentie = 1x per maand. Je privacy wordt serieus genomen: de mailinglijst bestaat alleen op onze servers.