当父级可拖动时，无法在 <input> 中选择文本答案

【问题标题】：No possibility to select text inside <input> when parent is draggable当父级可拖动时，无法在 <input> 中选择文本
【发布时间】：2015-01-24 18:48:07
【问题描述】：

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

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

在 Chrome 上运行良好，您可以选择 <input> 中的所有文本，例如。双击它或单击并拖动。在 IE10 上，您不能同时执行这两项操作（不确定其他版本中的 IE）。有什么想法吗？

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

【问题讨论】：

这似乎在 Chrome 上也被破坏了（你可以双击但不能点击和拖动），在 Firefox 上更糟糕（你不能在那里用鼠标选择文本位置）
在 IE11 中也是如此，Chrome 仍然可以正常工作...

标签： css google-chrome firefox draggable internet-explorer-10

【解决方案1】：

这是几个月前的reported as a bug，目前正在考虑在未来发布。

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

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

【讨论】：

感谢乔纳森的回答。我们在客户端 Intranet 网站上遇到了这个问题，我们使用 ng-grid 在标题中带有可移动的列和过滤器。
@yarl 您是否愿意使用您的配置和 ng-grid（或其较新版本，UI Grid）设置一个小提琴以进行进一步测试？或许我们可以暂时找出解决这个问题的另一种方法。
目前在awesomeforms.com 的表单生成器中面临这个确切的问题...
@Sampson：已经一年了，微软有什么更新或解决方案吗？
@ChrisVincent 你能让我访问构建器以与我们的团队分享吗？对于此类问题，通常最好有一个因错误而损坏的真实网站。

【解决方案2】：

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

例如，在我正在开发的一个应用程序中，我们默认在一个范围内显示文本，然后在用户单击它进行编辑时显示一个输入。此时，我们删除 draggable 属性，直到用户完成编辑，然后再读取它。

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

【讨论】：

【解决方案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>

【讨论】：

【解决方案4】：

我们观察到的情况，如果我们模糊并再次集中注意力，问题就会得到解决。然而移动光标位置仍然没有完成。但至少可以解决单击问题。

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

【讨论】：