如何防止粘贴到输入字段

2019年1月2日编辑：又一个网页表单让我无法将密码粘贴到“确认密码”字段，这让我很郁闷，我很好奇这是怎么回事，所以决定写篇文章来谈谈这个问题。我写这篇文章的目的是客观地评价你是否应该这样做，并鼓励你自行决定。不过，我也强烈建议你阅读这篇文章下面的讨论，因为它清楚地表明了这项功能是多么不受欢迎和不必要。

感谢 Dev 社区成员的所有评论和反馈，并使该网站成为互联网如此积极的一部分！

在某些表单中，“确认电子邮件地址”或“确认密码”字段不允许用户粘贴文本。这样做的目的是让用户输入两次电子邮件地址或密码，以帮助发现他们在输入重要的“电子邮件地址”和“密码”值时可能出现的拼写错误。

这个功能是如何实现的？如何阻止用户将内容粘贴到 HTML 输入字段中？

我们可以使用 JavaScript 来定位输入字段的粘贴事件并改变其工作方式：

<input type="text" id="no-paste" />

<script>
  const pasteBox = document.getElementById("no-paste");
  pasteBox.onpaste = e => {
    e.preventDefault();
    return false;
  };
</script>

此代码取消了 paste 事件的默认行为（即将剪贴板内容粘贴到输入元素中）。当用户尝试使用键盘快捷键或上下文菜单将内容粘贴到输入框中时，什么也不会发生。

在下面的 CodePen 示例中尝试一下：

还有剪切和复制操作的事件。

现代浏览器对 paste 事件提供了良好的支持。这些事件是Clipboard API的一部分。Clipboard API 还包含访问剪贴板内容的功能，但其支持程度各不相同。有关更多信息，请参阅Caniuse 的 Clipboard API 表。

您是否应该禁用粘贴功能？

现在您知道如何更改网页中粘贴事件的预期行为，接下来的问题是是否应该这样做。StackOverflow 上关于粘贴事件的这个问题的答案不鼓励开发者篡改浏览器的默认行为。发帖者反对更改浏览器的预期行为，因为这会让用户感到困惑。此外，如果用户决定将数据复制并粘贴到表单字段中，并承担其中可能包含拼写错误的风险，那么我们应该允许他们这样做。

每个网站都各有不同，所以没有绝对的答案。为了给用户提供最佳体验，在构建网站时考虑这些问题是个好主意。