在 IE 的 contenteditable div 的输入框中插入文本答案

【问题标题】：Insert text in input box in contenteditable div in IE在 IE 的 contenteditable div 的输入框中插入文本
【发布时间】：2015-07-04 00:08:28
【问题描述】：

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

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

https://jsfiddle.net/spgkpgdy/

谢谢。

【问题讨论】：

你能分享更多你的 HTML 吗？这是在表单元素中吗？还是其他 div 之类的？
这看起来很有趣。似乎 IE 为您提供了选择文本框的选项，以便将其删除/在 contenteditable 周围移动（哪种有意义）。也许一种选择是检查事件，如果单击了文本框，则将其聚焦以便可以对其进行编辑（但这似乎不是 IE 上的默认行为）
请尝试使用输入控件直接附加事件：

标签： html internet-explorer-11 contenteditable

【解决方案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

【讨论】：

这个解决方案有几个问题：input 会聚焦，即使它根本没有被点击（尝试双击 contenteditable 中不是input 的任何地方）；而且，即使双击发生在 input 上，如果页面有多个 input 元素（在 contenteditable 内部或外部），最后一个将聚焦而不是单击的那个（参见jsfiddle.net/spgkpgdy/5)。最好使用$(this).find("input").focus()，尽管如果 contenteditable 中有多个 input，这仍然会有问题
我明白你的意思，我刚刚更新了代码，你可以检查一下并告诉我。 :)

【解决方案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/

【讨论】：

作为评论，覆盖浏览器的默认行为并不总是一个好主意，因为用户可能会觉得体验很尴尬。在这种情况下，我建议至少在 contenteditable 中重新设置 input 的样式，因为默认情况下 IE 会显示 move 光标，这可能会造成混淆（将其光标更改为 text 所以它会更多直观的点击input时会发生什么动作）
在大多数情况下，用户会使用鼠标，但有时他们可能会使用键盘或触摸设备。所以我认为听onfocus 而不是onmousedown（外部div）可能会更好。
@stanleyxu2005 你是对的，键盘用户仍然会遇到这种解决方案的不良行为。但是使用onfocus 不适用于鼠标用户（我试过了，与onclick 和ontouchstart 相同）。问题恰恰在于输入在选择/单击时没有获得焦点，因此添加代码onfocus 无济于事。
刚刚看到你更新了评论。我将尝试使用外部div 的onfocus。但我可以想象，如果选择了 input 或选择了哪个 input（如果有多个），我会遇到麻烦
我们可以通过编程指定要聚焦的输入控件。无论如何，您的解决方案确实是一种聪明的技术。很高兴知道。祝你有美好的一天。

【解决方案3】：

行为

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

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

解决方案

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

<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();
}

【讨论】：