光标未居中于 Firefox 上文本对齐中心的空可编辑锚点

Question

我anchor在应用程序中有一些标签作为按钮，其contenteditable设置为true并text-align设置为center

但如果锚点中没有文本，则光标应居中，因为tex-align设置为center并且在 chrome 上按预期工作，但在 firefox 上，当未键入任何内容时，它会将光标显示在最左边。

HTML 代码如下：

.editable {
  display: block;
  color: red;
  border: 1px solid red;
  height: 100px;
  width: 100%;
  text-align: center;
}

<a class="editable" contenteditable>
</a>

我知道这是 Firefox 的一个错误，但是有办法解决这个问题吗？

Answer 1

更新

\n

attr()添加了占位符功能，并通过使用CSS功能使其更加通用。为了使其完全像占位符一样工作，有两个标准规定了占位符的行为（至少在 HTML 输入或文本区域方面）

\n

\n
• 当文本框为空时必须存在。:empty
\n
• 当文本框处于焦点时不得出现。:empty：不是(:focus)
\n

\n

每个锚点可以分配不同的占位符

\n

<a contenteditable data-ph=\'Placeholder\'></a>\n<!--Assign tag data-ph attribute and placeholder text as value-->\n

\n

a::before {\n  content: attr(data-ph)\n/* Add a pseudo-element ::before or ::after and use attr() function and data-ph \nas parameter */\n

\n

客观的

\n

行为：文本光标在内容可编辑元素内部左对齐，同时text-align: center为空且处于焦点状态。

\n

预期：文本光标在 contenteditable 元素内部居中对齐，同时text-align: center为空且处于焦点状态。

\n

纯CSS解决方案

\n

\n
1. ::after将伪元素分配给锚点。
\n
2. 样式::after为闪烁的光标。
\n
3. 伪元素上的设置:empty和:focus伪选择器。::after
\n
4. caret-color: transparent当锚点处于焦点且为空时隐藏真实光标。
\n
5. 当锚点不为空时display: none分配。::after
\n

\n

\r\n

\r\n

html {\n  font: 300 10pt/1.2 \'Segoe UI\'\n}\n\n.edit {\n  display: block;\n  min-height: 100px;\n  min-width: 100%;\n  border: 1px solid red;\n  font-size: 2rem;\n  color: red;\n  text-align: center;\n}\n\n.edit:empty:not(:focus)::before {\n  content: attr(data-ph);\n  font-style: italic;\n  font-weight: bold;\n  color: #ccc;\n  letter-spacing: 0.2em;\n  word-wrap: break-word;\n}\n\n.edit:focus::before {\n  display: none;\n}\n\n.edit:focus:empty {\n  caret-color: transparent;\n}\n\n.edit:focus:empty::after {\n  content: "";\n  display: inline-block;\n  width: 0.1ch;\n  height: 2.4rem;\n  vertical-align: text-bottom;\n  background: red;\n  animation: blink 0.85s steps(2) infinite;\n}\n\n.edit:focus::after {\n  display: none;\n}\n\n@keyframes blink {\n  0% {\n    opacity: 0;\n  }\n}

\r\n

<a class=\'edit\' contenteditable data-ph=\'Placeholder\'></a>\n<a class=\'edit\' contenteditable data-ph=\'\xef\xb8\x8f\'></a>

\r\n

\r\n

\r\n

\n