javascript - 在 IE 中使用占位符的 ContentEditable Div 中错误的焦点位置

Question

我有一个带有占位符的内容可编辑 Div。

查看此 fiddle .

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

#myDiv {
  border: 1px dashed #AAA;
  width: 290px;
  padding: 5px;
  text-align: center;
}

<div id="myDiv" contenteditable="true" placeholder="Enter text here..."></div>

问题是:当我们在 Chrome 中打开这个 fiddle 并单击 div 时，我们会在中心的 div 中获得光标焦点。看图片。下面:

但是当我们在 IE 中做同样的事情时，我们最终获得了占位符的焦点。见下图。

我也想在 IE 中将光标集中在中心。

Answer 1

我不确定为什么会发生这种情况，但您可以将 position: absolute; 应用到您的伪元素和一些额外的规则来调整 div 的大小。这在 IE11 中对我有用。

fiddle

例子:

[contenteditable=true] {
  position: relative;
}

[contenteditable=true]:empty:before {
  content: attr(placeholder);
  position: absolute;
  left: 0;
  right: 0;
  top: 4px;
  margin: auto;
}

#myDiv {
  border: 1px dashed #AAA;
  width: 290px;
  padding: 5px;
  text-align: center;
  height: 16px;
}

<div id="myDiv" contenteditable="true" placeholder="Enter text here..."></div>