如何为 DIV 创建一个类似于文本字段的“占位符”？

Posted 2023-03-05

【中文标题】如何为 DIV 创建一个类似于文本字段的“占位符”？

【英文标题】：How to create a "placeholder" for DIV that act like textfield?

【发布时间】：2013-06-01 05:42:24

【问题描述】：

Div 没有占位符属性

<div id="editable" contentEditable="true"></div>

我希望 <Please your enter your Name> 在用户退格 DIV 中的整个文本时显示在 DIV 中，或者里面没有文本，我该怎么做？

【问题讨论】：

您能详细解释一下用户如何“退格 div”吗？

抱歉我的错，忘记编码了

javascript 在这种情况下会成为你的朋友！

可以给我看一些例子吗？？

【参考方案1】：

这是一个纯 CSS 唯一的解决方案：-

<div contentEditable=true data-ph="My Placeholder String"></div>
<style>
    [contentEditable=true]:empty:not(:focus):before
        content:attr(data-ph)
    
</style>

在这里，我们基本上选择了所有空白和模糊的contentEditable <divs>。然后，我们在 CSS 选择（可编辑的 div）之前创建一个伪元素，并将占位符文本（指定 data-ph 属性）作为其内容。如果您的目标是老式 CSS2 浏览器，将所有出现的data-ph 更改为title 更正.......:empty 选择器在 IE 版本 8 及更早版本中不受支持。

【讨论】：

比人，我从没想过你可以用纯 css 做这样的事情。太棒了！

非建设性评论：这很漂亮！干得好！

即使元素被聚焦，如何保留占位符？如果没有 not(:focus) 选择器，插入符号会消失或出现在错误的位置。

@boh，即使在元素获得焦点时也要保留占位符，请执行以下操作： [contentEditable=true]:empty:before content: attr(data-ph)

如果div标签的开头和结尾之间有任何字符或空格，这将不起作用。

【参考方案2】：

我在其他答案中发现的是，当使用:not(:focus) 伪类时，我必须再次单击才能获得闪烁的光标并能够输入。如果我单击占位符以外的区域，则不会发生此类问题。

我的解决方法只是删除:not(:focus)。即使通过这种方式，在我单击可编辑 div 后占位符仍然存在，但无论我单击 div 中的哪个位置，我都可以键入，并且在我键入内容后占位符会立即消失。

顺便说一句，我检查了 YouTube 的评论 div 实现，似乎他们在做同样的事情，例如#contenteditable-root.yt-formatted-string[aria-label].yt-formatted-string:empty:before

.editableDiv1,
.editableDiv2 
  border-bottom: 1px solid gray;
  outline: none;
  margin-top: 20px;


.editableDiv1[contentEditable="true"]:empty:not(:focus):before 
  content: attr(placeholder)


.editableDiv2[contentEditable="true"]:empty:before 
  content: attr(placeholder)

<div class="editableDiv1" contentEditable=true placeholder="If you click on this placeholder, you have to click again in order to get the blinking cursor and type..."></div>

<div class="editableDiv2" contentEditable=true placeholder="Click on placeholder is fine, it'll disappear after you type something..."></div>

【参考方案3】：

你可以试试这个！

html:

<div contentEditable=true data-text="Enter name here"></div>

css:

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

check it out (demo)

【讨论】：

这与第一个答案有何不同？

【参考方案4】：

在 HTML 中

<div id="editable" contenteditable="true">
    <p>Please your enter your Name</p>
</div>

在 JavaScript 中

jQuery.fn.selectText = function()
    var doc = document;
    var element = this[0];
    console.log(this, element);
    if (doc.body.createTextRange) 
        var range = document.body.createTextRange();
        range.moveToElementText(element);
        range.select();
     else if (window.getSelection) 
        var selection = window.getSelection();        
        var range = document.createRange();
        range.selectNodeContents(element);
        selection.removeAllRanges();
        selection.addRange(range);
    
;

$("#editable").click(function() 
    $("#editable").selectText();
);

jsFiddle