jquery focusout не добавляет текст обратно в

Question

У меня есть текстовое поле, в котором есть текст при загрузке страницы. Когда кто-то нажимает на него, я бы хотел, чтобы этот текст исчез. Когда они нажимают на это, если они ничего не напечатали, я бы хотел, чтобы текст вернулся, но если у них ничего не произошло. Текст "Напиши свой ответ здесь". Это то, что у меня есть, оно работает для удаления текста по щелчку, но не для добавления его обратно, если они ничего не напечатали.

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

Большое спасибо за любую помощь в этом.

Answer 1

Что-то вроде этого:

$(".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