元素 <td> 内的自定义占位符未显示 [重复]答案

【问题标题】：Custom placeholder inside element <td> not showing [duplicate]元素 <td> 内的自定义占位符未显示 [重复]
【发布时间】：2016-12-12 08:54:47
【问题描述】：

我正在使用 JQuery 向表中动态添加新行。
我想在表格单元格中有一个占位符，当用户单击输入文本时该占位符消失。
我试图制作可以做到这一点的 CSS。

这里是 JQuery：

$("#addbutton").click( function(){
    $('#searchresults > tbody:last-child').append('<tr><td> <div contentEditable="true" data-text="Enter Name"></div> </td> \
                                                       <td><div contentEditable="true" data-text="Enter Description"> </div> </td>
                                                   </tr>')

这是 CSS：

<style>
[contentEditable=true]:empty:not(:focus):before{
    content:attr(data-text)
}
</style>

占位符文本未显示。
有什么建议？

我已经更新了问题，以便在.append('') 内的字符串中正确拼接新行我仍然无法显示文本。我在 El Capitan 上使用 Safari。新行已添加并可编辑，但文本不存在！

行被添加并且也是可编辑的。只是文字不可见。

【问题讨论】：

标签： javascript jquery html css

【解决方案1】：

我看到的唯一问题是新行：当您需要继续下一行时，您需要转义新行字符，如：

var str = '11111\
llllllll';

sn-p：

$(function () {
  $("#addbutton").click(function() {
    $('#searchresults > tbody:last-child').append('<tr><td><div contentEditable="true" data-text="Enter Name"></div></td>\
<td><div contentEditable="true" data-text="Enter Description"></div></td>\
</tr>');
  });
});

[contentEditable=true]:empty:not(:focus):before{
  content:attr(data-text)
}

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>

<button id="addbutton">addbutton</button>
<table id="searchresults">
    <tbody>

    </tbody>
</table>

【讨论】：

仍然无法显示文本。奇怪
@asehgal 它在我的 sn-p 中有效吗？
都是关于字符转义的。这是由@gaetanoM 代码组成的codePen。但是，如果您像他建议的那样“转义”，在行尾 AND 用制表符缩进下一行... Naaah。逃逸只计算换行符！看看我的CodePen here，它允许很酷的缩进
不。也没有帮助。如果线拼接是一个问题，它甚至可能不会添加行并使内容可编辑。行被添加并且也是可编辑的。只是文字不可见。

【解决方案2】：

$("#addbutton").click( function(){
    $('#searchresults > tbody:last-child').append('<tr><td> <div contentEditable="true" data-text="Enter Name"></div> </td> \
                                                       <td><div contentEditable="true" data-text="Enter Description"></div></td>
                                                   </tr>')

<td> <div> 之间有一个空格，如上所示。有人编辑了问题并将其删除。

请不要随意编辑问题。显然在会搞砸的！

【讨论】：

??字符串中的空格不是问题。我从未见过 HTML 中 à td 和 div 之间的空格存在问题。问题是 JS 中的字符串定界。
是的，你可能是对的，因为我使用的是 HTML INSIDE JS。