Advanced Search

jQuery Field text prompt

/ Published in: jQuery
Save to your folder(s)

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>Untitled Document</title>
  6. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
  7. <script>
  8. $(document).ready(function(){
  9.   $('input[type=text][title],input[type=password][title],textarea[title]').each(function(i){
  10.     $(this).addClass('input-prompt-' + i);
  11.     var promptSpan = $('<span class="input-prompt"/>');
  12.     $(promptSpan).attr('id', 'input-prompt-' + i);
  13.     $(promptSpan).append($(this).attr('title'));
  14.     $(promptSpan).click(function(){
  15.       $(this).hide();
  16.       $('.' + $(this).attr('id')).focus();
  17.     });
  18.     if($(this).val() != ''){
  19.       $(promptSpan).hide();
  20.     }
  21.     $(this).before(promptSpan);
  22.     $(this).focus(function(){
  23.       $('#input-prompt-' + i).hide();
  24.     });
  25.     $(this).blur(function(){
  26.       if($(this).val() == ''){
  27.         $('#input-prompt-' + i).show();
  28.       }
  29.     });
  30.   });
  31. });</script>
  32. <style>
  33. .input-prompt {
  34.   position: absolute;
  35.   font-style: italic;
  36.   color: #aaa;
  37.   margin: 0.2em 0 0 0.5em;
  38. }
  39. </style>
  40. </head>
  41.  
  42. <body>
  43. <input type="text" title="Enter something here." />
  44. <input type="password" title="Enter Password" />
  45. </body>
  46. </html>

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.