将占位符插入符号置于 contentEditable 元素的中心

Question

我有以下内容：http://jsfiddle.net/mb76koj3/。

[contentEditable=true]:empty::before{
  content:attr(data-ph);
  color: #CCC;
  text-align: center;
}

h1 {
  text-align: center;
}

<h1 contenteditable="true" data-ph="Name"></h1>

问题是

<h1>

居中，但占位符插入符号不居中（直到您开始键入）。插入符号位于左侧，我该如何更改它？

Answer 1

这不是理想的解决方案，但我们可以通过将

padding-left

的

50%

应用于

:empty

元素来伪造效果，使光标出现在中间。

然后使用绝对定位和

translateX

变换函数的负值将占位符（伪元素）对齐在中间。

* {
  margin: 0;
  padding: 0;
}

@-moz-document url-prefix() { /* CSS Hack to fix the position of cursor on FF */
  [contentEditable=true]:empty {
    padding-top: 1em;
    padding-bottom: .25em;
    -moz-box-sizing: content-box;
  }
}

[contentEditable=true]:empty {
  padding-left: 50%;
  text-align: left; /* Fix the issue on IE */
}

[contentEditable=true]:empty::before{
  content:attr(data-ph);
  color: #CCC;
  position: absolute;
  top: 0;
  left: 50%;
  -webkit-transform: translateX(-50%);
  -moz-transform:  translateX(-50%);
  -ms-transform:  translateX(-50%);
  -o-transform:  translateX(-50%);
  transform:  translateX(-50%);
}

h1 {
  text-align: center;
  position: relative;
}

<h1 contenteditable="true" data-ph="Name"></h1>

剩下的唯一问题 - 正如在OP提供的代码中可以看到的 - 是在 Firefox 上，一个空的

<br>

元素被附加到

contentEditable

元素，这导致

:empty

伪类不再与该元素匹配。因此占位符将不会被恢复。

但是，由于问题是关于光标的位置，我认为这种行为对于OP来说很好。

Answer 2

看了Hashem Qolami的回答后，我想出了这个：

[contentEditable=true]:empty {
    padding-left: 50%;
}

[contentEditable=true]:empty::before{
    content:attr(data-ph);
    color: #CCC;
    text-align: center;
    margin-left: -100%;
}

h1 {
    text-align: center;
}

<h1 contenteditable="true" data-ph="Name"></h1>

然而，adamdc78发现了2个问题：

• 在 IE11 中，光标出现在占位符后面。
• 在 Firefox 中，输入并清空后占位符不会恢复。

此时我不知道如何解决。

Answer 3

这个bug已经在2020年被报告过，但仍然没有修复。您可以投票：https://bugzilla.mozilla.org/show_bug.cgi?id=1625298