如何将光标位置放在 contenteditable 元素的居中对齐占位符的开头？

Posted 2023-03-05

【中文标题】如何将光标位置放在 contenteditable 元素的居中对齐占位符的开头？

【英文标题】：How to place cursor position at the start of center aligned placeholder of contenteditable element?

【发布时间】：2014-12-14 20:42:28

【问题描述】：

我有以下代码：

HTML：

<div class="title" contenteditable="true" placeholder="Title"></div>

CSS：

.title 
   width: 500px;
   margin: 0 auto;
   text-align: center;


[contenteditable=true]:empty:before
   content: attr(placeholder);

它会产生一个带有占位符的居中对齐的可编辑 div。我的问题是，当元素第一次聚焦时，光标位于 div 的开头，而不是占位符的位置：!http://screencast.com/t/66HWb3wKiV

我希望占位符在实际输入字符之前一直可见，并且光标位于占位符的开头。我怎么能做到这一点？

谢谢！

【问题讨论】：

复制***.com/questions/25304708/…

@Burn 不幸的是，该代码不适用于占位符。我遇到的问题是，直到键入一个键（或一些文本已经存在），光标才居中。我的问题是让它在此之前居中，当它第一次聚焦时，显示一个占位符。

很久了，但我在这里发布了一个类似问题的答案：***.com/questions/29288975/… — 你可能会觉得它很有帮助。

【参考方案1】：

我有解决此问题的方法。

改变你的CSS：

.title 
   width: 500px;
   margin: 0 25%;