I realize how simple this question should be to answer but I am in a medication fog and the answer is escaping me.

I would like to make this into a simple function to display specific text if the value of the text box is empty upon mouseout and to empty out the text value upon mouseover.

What I have right now that works but is very ugly:

$(".disappearOnClick").live('mouseover',function() {    
            if($(this).val() === 'BFA Offset') {
                $(this).val('')
            }
        });

    $(".disappearOnClick").live('mouseout',function() {
            if($(this).val() === '') {
                $(this).val('BFA Offset')
            }
        });

I realize how simple this question should be to answer but I am in a medication fog and the answer is escaping me.

I would like to make this into a simple function to display specific text if the value of the text box is empty upon mouseout and to empty out the text value upon mouseover.

What I have right now that works but is very ugly:

$(".disappearOnClick").live('mouseover',function() {    
            if($(this).val() === 'BFA Offset') {
                $(this).val('')
            }
        });

    $(".disappearOnClick").live('mouseout',function() {
            if($(this).val() === '') {
                $(this).val('BFA Offset')
            }
        });

• javascript
• jquery

• you are missing semicolon javascript – Ali Nouman Commented Nov 7, 2011 at 14:25
• the semicolon is not required unless this is all on 1 line. – kamui Commented Nov 7, 2011 at 14:33
• You can use hover instead of mouseover and mouseout. Syntax: $(element).hover(function_on_hover, function_on_mouseout); – Rob W Commented Nov 7, 2011 at 14:33
• @RobW but what about the live() function ? can you bine live() and hover() ? – Manse Commented Nov 7, 2011 at 14:36
• 2 @kamui "the semicolon is not required unless this is all on 1 line." dear god save us all. – jbabey Commented Nov 7, 2011 at 14:40

5 Answers 5

You can bind to multiple events using the live() method - so you could use something like this ->

$('.disappearOnClick').live('mouseover mouseout', function(event) {
  if (event.type == 'mouseover') {
     if($(this).val() === 'BFA Offset') {
            $(this).val('');
        }
  } else {
    if($(this).val() === '') {
            $(this).val('BFA Offset');
        }
  }
});

$(".disappearOnClick").mouseover(function(){...});

and

$(".disappearOnClick").mouseout(function(){...});

Would work just as well.

You should use hover instead:

$(".disappearOnClick").hover(
    function(){
        //mouseover
    },
    function(){
        //mouseout
    }
);

You could try something like this (you could of course change the focus/blur events to mouse-events):

http://jsfiddle/BD7JA/2/

// <input value="BFA Offset" data-placeholder="BFA Offset" class="is-placeholder" />

$('[data-placeholder]').on({
  focus: function (evt) {
    if ($(this).hasClass('is-placeholder')) {
      $(this).val('');
      $(this).removeClass('is-placeholder');
    }
  },
  blur: function (evt) {
    if ($(this).val() === '') {
      $(this).val($(this).data('placeholder'));
      $(this).addClass('is-placeholder');
    }
  }
});

Try this:

$(".disappearOnClick").mouseenter( function (this) {
    if ($('#'+this.id).val() == 'BFA Offset') 
        $('#'+this.id).val('')
}).mouseleave( function (this) {
    if ($('#'+this.id).val() == '') 
        $('#'+this.id).val('BFA Offset')
});