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

2019年7月28日 206次阅读

我有一个内容可编辑的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中打开这个小提琴并单击div时,我们将光标焦点放在div的中心位置.见图.下面：

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

但是当我们在IE中做同样的事情时,我们会把焦点放在占位符的最后.见下图.

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

我想把光标聚焦在IE的中心.

最佳答案 我不确定为什么会发生这种情况,但你可以申请职位：绝对;你的伪元素和一些额外的规则来调整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>
点赞