Question

我正在尝试在contenteditable div中的输入框中插入文本。当我单击输入框时，光标不会出现。双击输入框后我可以插入文本。在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

行为

当您第一次单击控件时，外部div正在聚焦。您可以通过在其边缘拖动任何白点来更改其大小。预计这是contenteditable=true。
当您双击单击时，div离开编辑模式并且输入控件被聚焦。所以你可以输入文字。

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

解决方案

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

＆＃13;

<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>

＆＃13;

更新1：

如果你不能删除属性并希望在div周围保持调整大小的抓手，你可以监听外部div的onfocus事件并将焦点设置为内部输入控件。

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

Answer 3

这个问题似乎发生了，因为当您点击它时，IE允许您围绕可疑的div移动输入，并且需要双击才能编辑其内容。

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

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

3 个答案:

行为

解决方案