如果没有值，则在ap标记内显示默认文本

Question

我有一个内容可编辑的<p>和一个类型为Submit的输入。 因此，如果<p>内没有任何值，我想显示一个默认文本（例如“添加评论...”）。 如果contenteditable是焦点，则删除默认文本。 现在，如果contenteditable不在焦点上，并且用户输入了一些文本，请保留用户键入的文本。 但是，如果contenteditable不是焦点，并且没有值，则显示默认文本。 如何在CSS或JavaScript（无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

也许使用:empty伪类和伪元素？

 #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

只需将控件放在p标记中，如下所示：

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

或者您可以使用html输入标签。

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

使用jQuery，您可以执行以下操作

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

你可以试试，

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

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