Question

使用Internet Explorer 11时，如果您有textareas或输入类型=＆＃39;文本＆＃39;在＆＃34; draggable = true＆＃34;之类的内容中，您会发现必须双击这些字段才能进行编辑。

很简单的小提琴显示这个（在IE11中查看）：

<div draggable="true">
    <textarea>Some text here! Of course, you'll have to DOUBLE click to edit it.</textarea>
    <input type="text" value="Some text here too"/>
</div>

这让我们感到疯狂。我们有一堆可以在屏幕上拖动的项目，它们有一个可编辑的标签字段，在IE11中点击该字段不会给你任何光标或任何东西。

这是故意的功能，是否有人有修复？

Answer 1

我用笔来解释我上面的评论。我认为切换这是一种方法，但如果它不符合您的要求，那么我建议远离默认的HTML5可拖动API并使用JS库来执行此操作。

IE 11 Draggable Toggle

HTML：

<ul>
    <li id="text-container">
        <textarea>Some text here! Of course, you'll have to DOUBLE click to edit it.</textarea>
        <input type="text" value="Some text here too"/>
    </li>
</ul>
<input type="button" value="draggable" id="toggle-button"/>

JS：

var toggleButton = document.getElementById('toggle-button');
var textContainer = document.getElementById('text-container');
    toggleButton.addEventListener('click', function(){
    if(textContainer.draggable===false){
        textContainer.setAttribute("draggable", "true");
        console.log("toggle true");
    }else
    if(textContainer.draggable===true){
        textContainer.removeAttribute("draggable");
        console.log("toggle false");

    };
});

Answer 2

我们观察到了什么：

如果我们模糊并再次关注，问题就解决了。但是仍然没有完成移动光标位置。但至少可以单击一下。

$(document).on('mouseup', '#id input:text, textarea', function (e) {
    $(this).blur();
    $(this).focus();
});

在draggable = true元素中，textareas和输入需要2次点击才能在IE11中进行编辑

2 个答案: