<p> 标签中的占位符

Posted 2023-03-05

【中文标题】<p> 标签中的占位符

【英文标题】：Placeholder in <p> tag

【发布时间】：2015-12-03 23:48:45

【问题描述】：

我试图在<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>

【问题讨论】：

占位符用于输入。你真的在寻找放一个简单的文字

【参考方案1】：

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

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

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

【讨论】：

掌握html和css真是神啊

【参考方案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>

【参考方案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>

【讨论】：

想解释一下发生了什么变化？ placeholder 不是 p 元素的无效属性吗？

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

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

@MarcosPérezGude：我最初回答的代码已经完美运行。是的，我忘记删除从问题中复制的 HTML 代码底部的占位符属性（我没有注意到），但是该属性对我的代码的功能没有影响，因为占位符属性是对 P 元素无效。自从我最初发布以来，我进行了一些编辑的唯一原因是因为我的回答收到了两次反对票，这表明我的回答需要对代码进行额外的解释和/或改进。

@MarcosPérezGude，不，这只是说明完全自定义标签将起作用，无论您想对它们做什么，并且 p 标签上的“占位符”不会产生任何问题。约翰的解决方案立即奏效，并对其进行了测试——如果 OP 真的想要那个（直到他对我的最后评论还不清楚）。但是 - 语言障碍是这里的问题，似乎......没有人明白其他人想说什么...... :)))