Question

我试图在<p>标记中添加占位符，我尝试了以下方法，但dint工作了。

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

＆＃13;

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

＆＃13;

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

＆＃13;

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>

所以代码片段看起来像这样

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

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

但是，您可以（1）在内容为空时获取placeholder属性的值，并且（2）将该值添加到段落而不是输入元素的内容。如果我正确地解释了您的问题，那就是您正在尝试做的事情。

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

＆＃13;

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

＆＃13;

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

＆＃13;

占位符在<p>标记中

3 个答案: