在占位符中添加 HTML答案

【问题标题】：Adding HTML Within Placeholder在占位符中添加 HTML
【发布时间】：2015-01-23 20:28:06
【问题描述】：

我喜欢使用 HTML 占位符，因为它有助于向用户描述他们需要输入的内容类型。但是，有时您需要为用户提供更多信息，而不仅仅是一个简单的句子。基本上我希望能够在我的 textarea 占位符中添加换行符、制表符等。我听说过使用特殊编码来做到这一点（并且已经使用这些编写了一些代码），但我发现它相当不可靠。例如，某些浏览器会为代码显示不同数量的空白。此代码的示例如下所示：

<textarea name="parts" id="parts" placeholder="Some-Part&#x0a;&#x09;&#x09;&#x09;&#x0a;&#x09;&#x09;&#x09;&#x09;&#x0a;&#x09;&#x09;&#x09;&#x09;&#x0a;..."></textarea>

因此，我对解决方案的想法是能够将实际的 HTML 元素放入占位符中。我一直在研究如何实现这一点，但一直找不到任何东西。您知道我可以去哪里找到与此类似或相同的功能吗？或者，你有什么替代方法可以让我完成同样的事情吗？

【问题讨论】：

标签： javascript html textarea placeholder

【解决方案1】：

根据定义，placeholder 属性的值是纯文本。没有识别标签。字符引用被识别，但 TAB U+0009 (&#09;) 等字符的效果被定义为依赖于实现。

所以不，你不能在那里有 HTML 标记。您的最终问题可能有解决方案，但您没有描述该问题。通常，如果您需要不是短纯文本字符串的placeholder 值，则您正在尝试针对其定义使用该属性。它是一个提示，增强字段标签和描述，而不是替换它们。通常，任何需要的描述都应该放在该字段之前，并且您可以根据需要使用 HTML 标记。

【讨论】：

【解决方案2】：

我能够找到这个使用 js 插入换行符的答案。 Insert line break inside placeholder attribute of a textarea?

【讨论】：

【解决方案3】：

文本区域标签内不允许使用 HTML。我会推荐一个不同的 UI/实现，但你可以这样做：

<div contenteditable="true" class="myarea">
    <em>Placeholder</em>
</div>

然后用 css 类模拟一个文本区域。然后你可以清除焦点上的内容

var firstFocus = true;
$('#myarea').focus(function() {
    if (firstFocus) {
        $('#myarea').html('');
        firstFocus = false;
    }
});

如您所见，它开始变得非常丑陋。这也不会与占位符属性完全相同，因此您必须管理文本光标和更改事件等。通常我觉得占位符文本是一个相当糟糕的 UI，因为一旦您开始输入信息就会消失:p

【讨论】：