HTML5 用鼠标在可拖动的 div 上选择 <input> 中的文本答案

【问题标题】：HTML5 select text in <input> with mouse on draggable divHTML5 用鼠标在可拖动的 div 上选择 <input> 中的文本
【发布时间】：2016-02-05 04:33:39
【问题描述】：

在下面的代码中，我希望能够在不移动父 div 的情况下用鼠标选择文本。（没有 jQuery）

<div draggable="true">
    <input type="text" value="This is text to select">
</div>

【问题讨论】：

标签： html input drag-and-drop draggable

【解决方案1】：

我的建议是，为输入元素设置一个 onblur 和 onfocus 事件，用于切换对象的可拖动属性。这是对我有用的测试代码：

<style>
    #dragObject{background-color: grey; padding: 80px 20px; width: 175px;}
</style>

<div id="dragObject" draggable="true">
    <input type="text" value="This is text to select" onfocus="entering()" onblur="leaving()">
</div>

<script>
function entering(){
    document.getElementById('dragObject').setAttribute("draggable", "false");
}

function leaving(){
    document.getElementById('dragObject').setAttribute("draggable", "true");
}
</script>

使用此解决方案，您的可拖动 div 必须大于输入，因为必须有一个可以在模糊输入时单击拖动的位置。尽管这甚至不应该是一个缺点，但从用户体验的角度来看，您至少需要一个标签或图标或其他可以抓住的东西。否则，您将不得不开始做一些奇怪的事情，例如“如果单击并按住一秒钟或更长时间，您打算拖动，否则您将选择文本”。从代码视图来看这是可行的，但可能是一个糟糕的用户界面选择。

【讨论】：