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

Question

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

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

在Chrome上它能正常工作，你可以选择<input>中的所有文本，例如双击或点击并拖动。在IE10上，这两种操作都不起作用（不确定其他版本的IE是否也是如此）。有什么想法吗？

示例：http://jsfiddle.net/s5g4gr8g/

- yarl

---

现在看起来在Chrome上也出现了问题（您可以双击但不能单击并拖动），而在Firefox上更加严重（您无法使用鼠标选择文本位置）。 - Ben McCormick

在IE11中也是一样的，Chrome仍然可以正常工作... - Christian Benseler

Answer 1

这个问题在几个月前被报告为一个bug，目前正在考虑在未来的版本中解决。

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

话虽如此，如果您通过制表符聚焦到元素本身，然后使用箭头和Shift键进行选择，似乎确实可以选择文本。您还可以右键单击输入控件，这也会放置一个光标，然后可以使用键盘进行操作。虽然不是理想的解决方案，但在我们能够从浏览器端解决它之前，它可能足以满足要求。

- Sampson

---

目前我们在 https://awesomeforms.com 的表单构建器中遇到了完全相同的问题... - Chris Vincent

@Sampson：已经过去一年了，微软有任何更新或解决方案吗？ - Kien Chu

@ChrisVincent，你能帮我获取建设者的访问权限，以便与我们的团队共享吗？对于这样的问题，最好是有一个真实的网站作为手头上由于错误而出现故障的例子。 - Sampson

@kienct89 在过去的一年中，我们已经解决了许多选择/可拖动问题，但这似乎不是其中之一。可能的原因是我们没有太多关于实际影响的数据。如果您有受到缺乏支持影响的实时域名，这将帮助我们优先处理工作。Edge和Firefox似乎以非常相似的方式运行。 - Sampson

@Sampson 你应该可以创建一个免费账户。不过，我们最终使用了一个解决方法，因为显然产品必须对我们的客户可用，所以如果你前往检查，问题就不会出现。 - Chris Vincent

Answer 2

一种可能的解决方法是，在您希望文本被突出显示的情况下，从父元素中删除可拖动属性。例如，在我正在处理的应用程序中，我们默认在 span 中显示文本，然后在用户单击它以进行编辑时显示输入框。此时，我们会删除可拖动属性，直到用户完成编辑，然后重新添加它。这种特定的流程可能适用于您，也可能不适用于您，但是如果您能预测用户何时可能会突出显示，您就可以最小化不良浏览器行为的影响。至少，您可以在焦点和失焦时切换可拖动功能，以便用户可以使用鼠标突出显示文本（如果他已经在编辑文本）。

- Ben McCormick

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>

- David Gausmann

Answer 4

我们观察到，如果我们模糊焦点然后再次聚焦，问题就会得到解决。然而，移动光标位置仍未完成。但至少对于单击来说是有效的。

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

- aman