在IE中内容可编辑div的输入框中插入文本

Question

我正在尝试在div contenteditable输入框中插入文本。当我单击输入框时，光标没有出现。双击输入框后，我可以插入文本。IE 中会出现此问题。

<div contenteditable="true">
   <input type="text">
</div>

https://jsfiddle.net/spgkpgdy/

谢谢。

Answer 1

你好，你可以尝试这样的东西，希望它对你有用

function controlselectHandler(evt) {
    evt.preventDefault();
}
document.body.addEventListener('mscontrolselect', controlselectHandler);

$('#abc').on('click','input[type="text"]',function(e){
    $(this).focus();  
})

我对此做了一些研究，我想出了解决方案，希望它有所帮助。

修订后的演示：https://jsfiddle.net/spgkpgdy/9/

参考链接：https://stackoverflow.com/a/21875990/2260060

Answer 2

此问题似乎是因为 IE 允许您在单击内容可编辑div时移动输入，并且需要双击才能编辑其内容。

一种可能的解决方案是通过使输入焦点onmousedown来覆盖 IE 的行为。这真的很容易做到：

document.querySelector("div[contenteditable='true'] input").onmousedown = function() {
    this.focus();
}

<div contenteditable="true">
    <input type="text" />
</div>

您可以在此JSFiddle上看到此JS解决方案和jQuery版本：http://jsfiddle.net/yuzs9rz4/4/

Answer 3

行为

• 首次单击控件时，外部div 将获得焦点。您可以通过拖动其边缘的任何白点来更改其大小。这是contenteditable=true意料之中的。
• 双击单击时，div 将离开编辑模式，输入控件获得焦点。因此，您可以输入文本。

两者都是 （Microsoft） HTML 文档元素的预期行为。

---

解决方案

1. 如果可以删除该属性，则您的网页在所有浏览器中的行为都将相同。
2. 如果无法删除该属性，则可以放置一个开关来切换可编辑状态。这是我的小代码示例：

<div id="ctrl" contenteditable="true">
    <input type="text" />
</div>
<div id="buttonGroup">
   <span>This affects to MSIE only</span>
    <button onclick="document.getElementById('ctrl').contentEditable='false'">Disable editable</button>
    <button onclick="document.getElementById('ctrl').contentEditable='true'">Enable editable</button>
</div>

---

更新 1：

如果无法删除属性，并且想要在div 周围保留调整大小控制手柄，则可以侦听外部div 的 onfocus 事件并将焦点设置为内部输入控件。

var divElem = document.querySelector("div[contenteditable='true']");
divElem.onfocus = function() {
    divElem.querySelector('input').focus();
}