Advanced Search

Return to Snippet

Revision: 33243
at October 7, 2010 05:00 by andres_314
Updated Code 
var textBoxs = $('.input-text-js');
textBoxs.each(function() {
  var theValue = $(this).attr('value');
  $(this).focus(function (){
    if($(this).attr('value') == theValue){
      $(this).attr('value','').addClass('writingIt');
    }
  }).blur(function () {
    if($(this).attr('value') == ''){
      $(this).attr('value',theValue).removeClass('writingIt');
    }
  });
});

Revision: 33242
at October 7, 2010 04:58 by andres_314
Initial Code 
var textBoxs = $('.input-text-js');
textBoxs.each(function() {
var theValue = $(this).attr('value');
  $(this).focus(function (){
    if($(this).attr('value') == theValue){
      $(this).attr('value','').addClass('writingIt');
    }
  }).blur(function () {
    if($(this).attr('value') == ''){
      $(this).attr('value',theValue).removeClass('writingIt');
    }
  });
});
Initial URL 
retto.com
Initial Description 
<p>This snippet could be used when a text input has a default value. Thus, when user clicks on the input to write, the default value disappears and allows the user to write, but if the user does not type anything, the default value will appears again. It also adds a class to the input when the user is typing on it and is removed when the input loses focus.</p><p>This snippet must be inside the ready event.</p><p>For the HTML markup, the only thing to take care is that you must use the same class in all the inputs that you want to give this functionality. In the example I use \"input-text-js\",  but you can use whatever you want.</p><p>You can see this snippet working on www.retto.com</p>
Initial Title 
Text input default value recover
Initial Tags 
javascript
Initial Language 
jQuery