Skip welcome & menu and move to editor
Welcome to JS Bin
Load cached copy from
 
<!DOCTYPE html>
<html>
<head>
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
<!--[if IE]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style>
  article, aside, figure, footer, header, hgroup, 
  menu, nav, section { display: block; }
</style>
</head>
<body>
  <p id="hello">Hello World</p>
  
  <form>
    <input type="text" name="myfield" id="myfield" value="Please, fill my field!!!" />  
    <input type="submit" value="send" />    
  </form>
</body>
</html>
 
$(document).ready(function() {
  // Handle each input on focus() and blug()
  $('input[type="text"]').each(function() {
    $(this)
      // Store the default value internally
      // Don't use .val() because browser autofill will poison it
      .data('defaultValue', $(this).attr('value'))
      // Handle the focus() (when you enter the field)
      .focus(function() {
        if ($(this).val() == $(this).data('defaultValue'))
          $(this).val('');
      })
      // Handle the blur() (when you leave the field)
      .blur(function() {
        if ($(this).val() == '')
          $(this).val($(this).data('defaultValue'));
      });
  });
  
  // Clear all fields with "default value" on submit
  $('form').submit(function() {
    $('input[type="text"]', $(this)).each(function() {
      // If the input still with default value, clean it before the submit
      if ($(this).val() == $(this).data('defaultValue'))
        $(this).val('');
    });
  });
});
Output 300px

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers