Question

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

＆＃13;

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

＆＃13;

Answer 1

我的建议是，输入元素有一个onblur和onfocus事件，它会切换对象的draggable属性。这是我的测试代码，对我有用：

<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必须大于输入，因为必须有一个位置，您可以在模糊输入时单击拖动。虽然这甚至不应该是一个缺点，但从UX的角度来看，你至少需要一个标签或图标或东西来抓住。否则你就必须开始做一些奇怪的事情，比如“如果你点击并按住一秒或更长时间，你就打算拖动，否则你将会选择文字”。其中，可以从代码视图中进行，但可能是用户界面选择不佳。

HTML5在<input />中选择文本，鼠标位于可拖动的div上

1 个答案: