Mouseover / MouseOut jQuery

Question

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')
            }
        });

Answer 1

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');
        }
  }
});

Answer 2

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

and

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

Would work just as well.

Answer 3

You should use hover instead:

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

Answer 4

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

http://jsfiddle.net/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');
    }
  }
});

Answer 5

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')
});