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

Question

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

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

https://jsfiddle.net/spgkpgdy/

谢谢。

Answer 1

行为

当您第一次单击控件时，外部 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();
}

Answer 2

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

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

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

您好，您可以试试这样的方法，希望对您有用

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/

参考 link：

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

Insert text in input box in contenteditable div in IE

html

contenteditable

internet-explorer-11

行为

解决方案