<p> 标签中的占位符

Question

我试图在<p> 标签中添加占位符，我尝试了以下方法，但效果很好。

我需要在<p> 标记中添加一个占位符，它应该替换为输入文本中的值。

JS fiddle Link

  $( "#incharge" )
  .keyup(function() {
	var value = $( this ).val();
	$( "p#incharge" ).text( value );
  })
  .keyup();

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="text" placeholder="The manager in charge name" data-toggle="tooltip" data-placement="right" id="incharge" name="incharge" title="Provide The manager in charge name">

<br>
<br>

<p id="incharge" placeholder="Some Placeholder text comes here"></p>

Answer 1

您可以使用:empty、:focus 和伪元素来伪造某种占位符：

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

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

Answer 2

您不能在输入之外使用占位符。要将文本放在段落中，简单的文本：

<p id="incharge">Some Placeholder text comes here</p>

所以 sn-p 看起来像这样

  $( "#incharge" )
  .keyup(function() {
    var value = $( this ).val();
    $( "p#incharge" ).text( value );
  });

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<input type="text" placeholder="The manager in charge name" data-toggle="tooltip" data-placement="right" id="incharge" name="incharge" title="Provide The manager in charge name">

<br>
<br>

<p id="incharge">Some Placeholder text comes here</p>

Answer 3

您只能将placeholder 属性用于输入元素。

但是，您可以 (1) 在内容为空时获取 placeholder 属性的值，以及 (2) 将该值添加到您的段落而不是输入元素的内容中。如果我正确地解释了你的问题，那就是你想要做的。

您可以使用以下代码实现该效果：

  $( "#i-incharge" )
      .keyup(function() {
          var input = $( this ),
              output = $( 'p#p-incharge' ),
              inputvalue = input.val();

          if(inputvalue === '') {
              inputvalue = input.attr( 'placeholder' );
          }
          output.text( inputvalue );
      })
      .keyup();

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<input type="text" placeholder="The manager in charge name" data-toggle="tooltip" data-placement="right" id="i-incharge" name="incharge" title="Provide The manager in charge name">

<br>
<br>

<p id="p-incharge"></p>