禁用拖放所选文本

Posted 2023-05-08

【中文标题】禁用拖放所选文本

【英文标题】：Disable drag and drop of selected text

【发布时间】：2018-07-15 22:24:28

【问题描述】：

当我使用 chrome 时，可以将输入或文本框中的任何选定文本拖放到另一个输入/文本区域中。有什么方法可以禁用拖动选定的文本？

【问题讨论】：

Disable Drag and Drop on html elements?的可能重复

您想让您的用户首先选择文本吗？阻止选择而不是显式操作可能更容易。尽管在任何一种情况下，我都想知道，即使只是口头上的，为什么你似乎以这种方式讨厌你的用户？

@DavidThomas 只是好奇你为什么会假设她讨厌她的用户？也许这是用户的需求。并非一直如此，但我通常关注 OP 问题的 如何 而不是 why。

@user9263373：“我......奇怪，如果只是口头上......”我不认为 OP 真的讨厌她的用户，我用它作为 -从字面上看 - 一种修辞手段来表达我自己作为用户的挫败感，因为这种方式侵入了我使用网站的方式。虽然我确实想到了如何可以完成某事（并且没有什么可以添加的，现有答案中尚未涵盖），但询问为什么通常会产生更好的理解需要什么，告知 如何 以便为 OP 提供更好的答案。

@DavidThomas 我确实意识到您的问题是修辞性的，您对我的回答是一个完全有效的答案。我想我最初的反应是，当我最初阅读它时，您的措辞有些令人反感。

【参考方案1】：

document.getElementById("test").addEventListener("dragstart", function(e)
  e.preventDefault();
);

<input id="test" type="text" value="Drag text into textarea">
<br>
<textarea></textarea>

【讨论】：

@ShirleyRozenboim 仅供参考，虽然此代码可防止拖动，但它不会阻止、剪切、复制和粘贴键盘事件和/或鼠标事件。还需要为这些添加事件侦听器。您可以使用我为完整答案提供的解决方案对此进行测试，或者在此接受的答案之外添加事件侦听器。

我只关心拖放，而不关心其他事件监听器。不过感谢您的帮助！

【参考方案2】：

将剪切、复制和粘贴事件绑定到<input> 框并阻止默认操作。

更新

我还将dragstart 绑定到#Textbox1，现在这也可以防止将文本从这个输入拖到另一个输入。我使用 Chrome 验证了这一点。

$(document).ready(function() 
  $('#TextBox1').on('copy paste cut dragstart',function(e)  
    e.preventDefault(); //disable cut,copy,paste
    console.log('cut,copy & paste options are disabled !!');
  );
);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="TextBox1" placeholder="Can't cut this!" /><br />
<input type="text" id="TextBox2" />

【讨论】：

这并没有解决我的问题。如果运行代码sn-p，在输入中输入一些文本，全选，然后拖动（例如，全选文本并拖入URL栏），文本仍然是可拖动的。我正在努力阻止这种行为。

是的，你是对的。它确实可以防止使用键盘事件进行剪切/复制/粘贴，但在拖放时不会...有趣。我会看看我还能想出什么。