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

我试图在

contenteditable

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

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

谢谢。

• 当您第一次单击该控件时，外部div正在聚焦。可以通过拖动其边缘的任何白点来更改其大小。这是预期要执行的

  contenteditable=true

• 双击click时，div将离开编辑模式，输入控件将聚焦。因此，您可以输入文本

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

---

解决方案

如果您可以删除该属性，则您的网页在所有浏览器中的行为都将相同

如果无法删除该属性，可以将开关置于“切换可编辑状态”。下面是我的小代码示例：

这只影响MSIE
禁用可编辑
启用可编辑

之所以出现此问题，是因为IE允许您在单击内容Editable

div

时在其周围移动输入，并且需要双击以编辑其内容

一种可能的解决方案是通过将输入焦点设置为onmousedown

来覆盖IE的行为。这其实很简单：


document.querySelector（“div[contenteditable='true']input”）.onmousedown=function（）{
这是focus（）；
}
您好，您可以试试这样的东西，希望对您有用

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



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

我对此做了一些研究，并提出了解决方案，希望能有所帮助

修订版演示：

参考链接：
你能分享更多你的HTML吗？这是否在表单元素中？比如说另一个div？这看起来很有趣。IE似乎为您提供了选择文本框的选项，以便将其删除/移动到contenteditable（哪种类型有意义）。也许一个选项是检查事件，如果点击了文本框，则将其聚焦以便编辑（但这似乎不是IE上的默认行为）请尝试使用输入控件直接附加事件：作为注释，覆盖浏览器的默认行为并不总是一个好主意，因为用户可能会觉得体验很尴尬。在这种情况下，我建议至少在contenteditable中重新设置
输入
，因为默认情况下IE会显示
移动
光标，这可能会造成混淆（将光标更改为
文本
，这样在大多数情况下，当点击
输入
时会发生什么动作会更直观），用户将使用鼠标，但有时可能使用键盘或触摸设备。因此，我认为听
onfocus
而不是
onmousedown
（外部
div
）可能会更好。@stanleyxu2005您是对的，键盘用户使用此解决方案仍会遇到不希望出现的行为。但是使用
onfocus
对鼠标用户不起作用（我尝试过，与
onclick
和
ontouchstart
一样）。问题恰恰在于，在选择/单击输入时，输入没有获得焦点，因此在焦点上添加代码
onfocus
没有帮助。刚才看到您更新了注释。我将尝试使用外部
div
的
onfocus
。但是我可以想象，如果选择了
input
，或者可以通过编程指定哪个
input
（如果有多个）的输入控件，那么我将很难确定。无论如何，你的解决方案确实是一种聪明的技术。很高兴知道。祝您愉快。此解决方案有几个问题：
输入
即使在根本没有单击的情况下也会聚焦（请尝试双击内容编辑器中非
输入的任何位置
）；而且，即使双击
输入
，如果页面有多个
输入
元素（在contenteditable内部或外部），最后一个元素将聚焦，而不是单击的元素（请参阅）。最好执行
$（此操作）。查找（“输入”）.focus（）
，尽管如果contenteditable在itI中有多个
输入
，这仍然会有问题。我明白你的意思了，我刚刚更新了代码。你能检查一下并让我知道吗。：）