jquery focusout not adding text back in

Question

I have a textarea that has some text in it on page load. When someone clicks on it I'd like for that text to go away. When they click out of it, if they haven't typed anything I'd like the text to come back, but if they have for nothing to happen. The text is 'Type your answer here". This is what I have which works for removing the text on click but not for adding it back in if they haven't typed anything.

$(".area-3").focusin(function() {
     $(".area-3").text(" ");
 }).focusout(function() {
    if ($(".area-3").val().length == 0) {
     $(".area-3").text("Type your answer here.");
    } 
 });

thanks so much for any help on this.

Answer 1

Something like this :

$(".area-3").on({
    focus: function() {
       if (this.value == 'Type your answer here.') this.value = '';
    },
    blur: function() {
       if ( $.trim(this.value) == '') this.value = 'Type your answer here.';
    }
});

FIDDLE