当父项可拖动时，无法选择<input>内的文本

Question

这是 IE 特定的（显然不再是了）。我们有非常简单的代码：

<div draggable="true">
    <p>Text</p>
    <input type="text"/>
</div>

在 Chrome 上它工作正常，您可以选择

<input>

中的所有文本，例如。双击它或单击并拖动。在 IE10 上，您不能执行这两个操作（不确定其他版本中的 IE 是否如此）。有什么想法吗？

小提琴：http://jsfiddle.net/s5g4gr8g/

Answer 1

几个月前，这被报告为错误，目前正在考虑在未来发布。

其中一个障碍是我们无法确定该问题的影响。我记得在网上和 GitHub 上搜索过依赖这种模式的网站，但大多都是空手而归。如果您碰巧知道有任何网站使用此功能，并因此在 Internet Explorer 10 和 11 中损坏，我很乐意更新内部问题并请求立即采取行动。

话虽这么说，如果您将焦点移到元素本身，然后使用箭头和 Shift 键执行选择，您确实可以选择文本。您还可以右键单击输入控件，这也会放置一个光标，然后您可以使用键盘进行操作。这并不理想，但在我们可以从浏览器端解决此问题之前，这可能就足够了。

Answer 2

此解决方案的一个可能的解决方法是在您希望突出显示文本的情况下从父元素中删除可拖动属性。

例如，在我正在开发的应用程序中，我们默认在范围内显示文本，然后当用户单击它进行编辑时显示输入。此时，我们删除可拖动属性，直到用户完成编辑，然后重新添加它。

该特定流程可能适合您，也可能不适合您，但如果您可以预测用户何时会突出显示，您可以最大限度地减少不良浏览器行为的影响。至少，您可以在焦点和模糊上切换可拖动，以便用户可以在已经编辑文本时用鼠标突出显示。

Answer 3

Ben McCormick 提到的方式在主要浏览器上对我来说效果很好（使用 Internet Explorer 11、Firefox 和 Chrome 进行了测试）。 对于我的解决方案，您需要有一个标准来确定具有可拖动属性的父级（在我的例子中，我使用类名）。

function fixSelectable(oElement, bGotFocus)
{
	var oParent = oElement.parentNode;
	while(oParent !== null && !/\bdraggable\b/.test(oParent.className))
		oParent = oParent.parentNode;
	if(oParent !== null)
		oParent.draggable = !bGotFocus;
}

<div class="draggable" draggable="true">
    <p>Text</p>
    <input type="text" onfocus="fixSelectable(this, true)" onblur="fixSelectable(this, false)"/>
</div>

Answer 4

我们观察到的情况，如果我们模糊并再次聚焦，问题就解决了。然而移动光标位置仍然没有完成。但至少可以实现单击的技巧。

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

Answer 5

这不是答案，但我想报告一下，从 FF 124.0.1 开始，此问题仍然存在。 Chrome (123.0.6312.59) 按预期工作。您可能认为 Mozilla 现在已经解决了这个问题。