[英]Display default text inside a p tag if there is no value
I have a content editable <p>
and an input of type submit. 我有一个内容可编辑的<p>
和一个类型为Submit的输入。 So, if there is no value inside the <p>
, I want to display a default text (eg. "Add comment..."). 因此,如果<p>
内没有任何值,我想显示一个默认文本(例如“添加评论...”)。 If contenteditable is in focus remove the default text. 如果contenteditable是焦点,则删除默认文本。 Now if contenteditable is not in focus and user has input some text, leave the user typed text. 现在,如果contenteditable不在焦点上,并且用户输入了一些文本,请保留用户键入的文本。 However, if contenteditable is not in focus and theres not value display the default text. 但是,如果contenteditable不是焦点,并且没有值,则显示默认文本。 How can I do this in css or javascript (no jquery) ? 如何在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>
Perhaps with the :empty
pseudo-class and a pseudo-element? 也许使用: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>
Just put a control inside the p tag like this: 只需将控件放在p标记中,如下所示:
<p> <asp:Label ID="Label1" runat="server" Text=""></asp:Label></p>
or you can use html input tag. 或者您可以使用html输入标签。
https://jsfiddle.net/moongod101/jcma31L8/ 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)
}
});
});
With jQuery you could do something like this 使用jQuery,您可以执行以下操作
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);
}
});
You can try, 你可以试试,
p:empty:not(:focus)::before
{
content: attr(data-placeholder);
}
<p data-placeholder="Insert text here..." contenteditable></p>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.