Display default text inside a p tag if there is no value

Question

I have a content editable <p> and an input of type submit. So, if there is no value inside the <p> , I want to display a default text (eg. "Add comment..."). If contenteditable is in focus remove the default text. Now if contenteditable is not in focus and user has input some text, leave the user typed text. However, if contenteditable is not in focus and theres not value display the default text. How can I do this in css or javascript (no jquery) ?

 #add_comment { width: 100%; max-width: 720px; margin: 1px auto; background: white; } #divLeft { vertical-align: top; display:table-cell; width: 100%; } #add_comment #comment { display: block; padding: 10px; margin: 10px; outline: 1px solid lightgrey; } #divRight { display:table-cell; width: 120px; vertical-align: top; } #divRight #submit { background: #2ec76e; border: none; color: white; padding: 10px; margin-top: 10px; margin-right: 10px; border-radius: 3px; cursor: pointer; } 

 <div id="add_comment"> <div id="divLeft"> <p id="comment" contenteditable="true"></p> </div> <div id="divRight"> <input type="submit" value="Comment" id="submit" /> </div> </div> 

Answer 1

Perhaps with the :empty pseudo-class and a pseudo-element?

 #add_comment { width: 100%; max-width: 720px; margin: 1px auto; background: white; } #divLeft { vertical-align: top; display: table-cell; width: 100%; } #add_comment #comment { display: block; padding: 10px; margin: 10px; outline: 1px solid lightgrey; } #divRight { display: table-cell; width: 120px; vertical-align: top; } #divRight #submit { background: #2ec76e; border: none; color: white; padding: 10px; margin-top: 10px; margin-right: 10px; border-radius: 3px; cursor: pointer; } p:empty:before { content: 'Add Comment'; color: grey } p:focus::before { content: ''; } 

 <div id="add_comment"> <div id="divLeft"> <p id="comment" contenteditable="true"></p> </div> <div id="divRight"> <input type="submit" value="Comment" id="submit" /> </div> </div> 

Answer 2

Just put a control inside the p tag like this:

<p> <asp:Label ID="Label1" runat="server" Text=""></asp:Label></p>

or you can use html input tag.

Answer 3

https://jsfiddle.net/moongod101/jcma31L8/

$(function(){

$dfText = 'How was your day hum?'
$p = $('p');

$p.text($dfText);

$('input').on('input',function(){
    $text = $(this).val();
    if( $text == '' ){
    $p.text($dfText)
  }else{
    $p.text($text)
  }

});


});

Answer 4

With jQuery you could do something like this

jQuery

var placeHolder = 'Add Comment';

$("#comment").text(placeHolder);

$("#comment").bind("focusin blur", function () {
  if ($(this).text() === placeHolder) {
    $(this).text('');
  } else if($(this).text() === ''){
    $("#comment").text(placeHolder);
  }
});

Answer 5

You can try,

 p:empty:not(:focus)::before 
 {
    content: attr(data-placeholder);
 }

 <p data-placeholder="Insert text here..." contenteditable></p>