Question

我有一个内容可编辑<p>和一个提交类型的输入。因此，如果<p>内没有值，我想显示默认文本（例如＆＃34;添加评论...＆＃34;）。如果contenteditable处于焦点位置，请删除默认文本。现在，如果contenteditable不在焦点并且用户输入了一些文本，请保留用户键入的文本。但是，如果contenteditable不在焦点上且theres not value显示默认文本。我怎么能用css或javascript（没有jquery）呢？

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

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

＆＃13;

#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: '';
}

＆＃13;

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

＆＃13;

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

你可以尝试，

Button button;
if (result == null)
{
    result = LayoutInflater.From(_Context).Inflate(Resource.Layout.DiagnoseTemplateLayout, null, false);
    button = result.FindViewById<Button>(Resource.Id.DeleteDiagnoseTemplateButton);
    button.Click += delegate {...}

}
TextView textView = result.FindViewById<TextView>(Resource.Id.DiagnoseTemplateTextView);
textView.Text = _Diagnoses[position].Description;
button.Tag = _Diagnoses[position].Key;

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

5 个答案: