<p>标签中的占位符</p>

Question

我试图在<p>标签中添加占位符，但是尝试了以下方法没有成功。

我需要在<p>标签中使用一个占位符，它应该被输入文本中的值替换。

JS fiddle链接

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

- hemasundar

---

占位符是用于输入的。你真的只是在寻找一个简单的文本来替换它。 - Marcos Pérez Gude

Answer 1

可以使用 :empty，:focus 和伪元素来模拟某种类型的占位符：

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

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

- Oriol

---

掌握HTML和CSS真是太棒了。 - cosmichero2025

Answer 2

你只能在输入元素中使用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>

- John Slegers

---

在这段代码中，您可以删除占位符并运行相同的代码。否则，这不是 OP 想要的。他想要放置一个占位符，而不是将输入值复制到段落中。占位符仅适用于表单组件（输入框、文本框）。 - Marcos Pérez Gude

@nevermind：用户只想将输入字段中显示的内容复制到段落中。如果输入有任何内容，用户希望复制该内容。如果不存在任何内容，则希望复制占位符。与马可斯的答案不同，我的答案正是实现了这一点，正如该用户对我的答案的评论所示。 - John Slegers

@MarcosPérezGude，对我来说并不难，即使“placeholder”标签对于段落无效->它实际上也可以工作（data-placeholder'将是“按照书本”解决方案，但浏览器并不那么严格，您可以添加/使用一些不存在的属性，并获取它们的值：http://jsfiddle.net/sor0y588/ ;) - sinisake

@MarcosPérezGude：我的初始答案代码已经完美地运行了。是的，我忘记从问题中复制的HTML代码底部删除占位符属性（我没有注意到），但该属性对我的代码功能没有影响，因为占位符属性对于P元素无效。我之所以在最初的帖子后进行了一些编辑，是因为我的答案收到了两个反对票，表明我的答案需要额外的解释和/或改进代码。 - John Slegers

@MarcosPérezGude，不，这只是说明完全自定义标签将起作用，无论您想要做什么，而“p”标签上的“placeholder”不会造成任何问题。约翰的解决方案立即生效，我已经测试过了 - 如果OP实际上想要那个（直到他最后一条评论对我来说还不清楚）。然而 - 语言障碍似乎是一个问题... 没有人理解其他人试图说什么... :))) - sinisake

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>

- Marcos Pérez Gude