Заполнитель в теге<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

Вы можете использовать только placeholder атрибут для элементов ввода.

Вы можете, однако, (1) получить значение значение placeholder Атрибут, когда содержимое пусто и (2) добавьте это значение в ваш абзац вместо содержимого элемента input. Если я правильно интерпретирую ваш вопрос, это то, что вы пытаетесь сделать.

Вы можете добиться этого эффекта, используя следующий код:

  $( "#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>

Answer 3

Вы не можете использовать заполнители из входных данных. Чтобы поместить текст в абзац, простой текст:

<p id="incharge">Some Placeholder text comes here</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>