如果没有值，在p标签内显示默认文本

我有一个可编辑内容<p>和一个类型为submit的输入。所以，如果<p>内部没有任何值，我想显示默认文本（例如“添加评论...”）。如果contenteditable焦点消除默认文本。现在，如果contenteditable不在焦点并且用户输入了一些文本，请保留用户键入的文本。但是，如果contenteditable不是焦点，而且值不显示默认文本。我怎么能做到这一点在CSS或JavaScript（没有jQuery）？如果没有值，在p标签内显示默认文本

#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>

来源

2016-07-08 Karl

你有一个'p'元素而不是''输入'元素的具体原因是什么？在后一种情况下，您可以使用'placeholder =“添加注释...”'，它可以提供您正在查找的功能，并且可以在不使用支持JS的浏览器的情况下工作，同时支持各种样式。 – TheThirdMan

@TheThirdMan因此，当我添加更多的内容时，它会增加它的高度。 – Karl

啊，我可以看到推理......但是，您应该注意到，这将使屏幕阅读器或自动化工具难以分析页面上正在发生的事情，因此，请勿尝试使用任何关注可访问性的事情。 – TheThirdMan

也许与: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>

来源

2016-07-08 08:50:04

哇......它是跨浏览器吗？ – Karl

非常多 - https://developer.mozilla.org/en-US/docs/Web/CSS/:empty –

只要把控制p标签内是这样的：

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

，或者您可以使用HTML input标签。

来源

2016-07-08 08:56:31

–

对我而言，道歉..它认为它是系统错误..我把这个答案包含在上面的答案中，在两个句子的中心，但是当我继续时。留下的答案。我只是一个新成员。道歉 –

为你编辑它。 –

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) 
    } 

}); 


});

来源

2016-07-08 09:10:49

使用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); 
    } 
});

来源

2016-07-08 09:22:37 SvenL

你可以试试，

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

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

来源

2016-07-08 10:25:57 Vir

如果没有值，在p标签内显示默认文本

回答

相关问题