Javascript: как изменить мой код, чтобы добавить обратно исчезнувший placeholder после сообщения темы

Question

Я использую подключаемый модуль, чтобы вручную создать местозаполнитель для конкурирующего div.

показано на демо внизу. Если пользователь вставляет какой-то текст, затем нажмите кнопку «Отправить», местозаполнитель исчез. Я задался вопросом, как вернуть местозаполнитель после публикации.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> 


<div id="topic_content_input" contenteditable="true" autocomplete="off" spellcheck="false" data-placeholder="placeholder text" ></div> 
<button id="post">Post topic</button> 

<style> 
#topic_content_input[data-placeholder]:not([data-div-placeholder-content]):before { 
    content: attr(data-placeholder); 
    float: left; 
    cursor:text; 
    margin-left: 2px; 
    color: rgba(134,134,134,0.6); 
} 

#topic_content_input{ 
width:521px; 
    padding: 10px; 
    border: 1px solid orange; 
} 

#topic_content_input:focus{ 
    outline-style:solid; 
    outline-color:orange; 
    outline-width:0px; 
    line-height:normal; 
} 
</style> 


<script> 
(function ($) { 
    $(document).on('change keydown keypress input', '#topic_content_input[data-placeholder]', function() { 
     if (this.textContent) { 
      this.dataset.divPlaceholderContent = 'true'; 
     } 
     else { 
      delete(this.dataset.divPlaceholderContent); 
     } 
    }); 
    })(jQuery); 
    </script> 
<script> 
$("#post").click(function(){ 
    $("#topic_content_input").text(""); 
    var obj=$("#topic_content_input"); 

    // $("#topic_content_input").add(obj.dataset.divPlaceholderContent); //my attempt, not working 
}) 

</script> 

Answer 1

В CSS, вместо того #topic_content_input[data-placeholder]:not([data-div-placeholder-content]):before, вы можете вместо этого положить в #topic_content_input:empty:before, который поставит в заполнителе всякий раз, когда ДИВ пуст, как показано в этом jsfiddle.

Answer 2

$("#topic_content_input").add(obj.dataset.divPlaceholderContent); 

Почему ".add"?

вы Шоул использовать:

obj.val(obj.dataset.divPlaceholderContent) 

или

obj.attr('placeholder', obj.dataset.divPlaceholderContent)