如何使用 JavaScript 防止文本字段中的任何类型的输入？

Question

是否可以使用 JavaScript 在文本字段中防止 任何 类型的输入？特别包括：

• 在键盘上输入文字（可以通过keydown事件捕获）
• 使用上下文菜单粘贴文本（可以通过paste 事件捕获）
• 使用上下文菜单剪切文本（可以通过cut事件捕获）
• 使用上下文菜单删除文本
• 通过上下文菜单使用浏览器的内置拼写检查器替换文本
• 例如在 Chrome 中使用上下文菜单插入表情符号

readonly 属性在语义上是可行的方法，但如果该字段设置为 required（或使用额外的 JS 逻辑？），它不适用于内置表单验证。

捕获focus 事件并立即触发blur 可防止选择和复制文本。

将输入值存储在focus 上并在每个change 事件之后设置它会有点工作，但内容会闪烁片刻。

有什么想法吗？

编辑：有些人问我为什么需要这样做，这没有任何意义。首先，我知道可以通过浏览器开发人员工具设置该值，并且我也知道需要适当的后端验证，它就在那里。 问题背后的想法如下： 我有一个文件输入字段。为了正确设置样式，隐藏了实际的<input type="file">，并使用了一个 Bootstrap 输入组，旁边有一个文本字段和一个浏览按钮（该按钮是隐藏文件字段的标签，因此单击它确实会打开选择文件对话框，即适用于所有经过测试的浏览器）。一旦用户选择一个文件，文本字段就会更新以显示文件名。显示文件名的文本字段将 HTML5 属性设置为 required，因此任何表单提交都会让浏览器检查文本字段是否为空，如果是，则显示错误。如果我将文本字段设置为readonly 或disabled，则提交时浏览器不会验证该字段。我想让浏览器执行验证而不是自定义 JS 代码，以便按照字段在页面上出现的顺序执行字段验证，以便所有预提交错误具有相同的外观和感觉。

编辑 2： 还有一件事，由于实际的文件输入字段是隐藏的，将其设置为 required 而不是显示文件名的文本字段会导致 Chrome 出现以下错误: "name='myfancyname' 的无效表单控件不可聚焦。"

Answer 1

您可以在输入元素的keydown（以及copy、paste、cut）事件上尝试event.preventDefault。检查此链接以获取文档https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault。

我在这里有一个示例实现 https://jsfiddle.net/ytx192ca/

我对用例很好奇，因为如果您需要一个用户无法更改任何内容的字段，那么为什么不使用 span、p 或 input 元素以外的任何其他元素

Answer 2

似乎没有一个完整的方法来处理原始问题。

在我在编辑中描述的特定情况下，我能够通过不使用display: none 作为文件输入但通过opacity: 0 使其不可见来解决该问题。通过此更改，可以使文件输入元素本身具有我想要用于表单验证的required 属性集。我想伪造只读的文本字段现在真的可以只读了，因为我不再需要它来进行表单验证。

Answer 3

在你的 js 中做这样的事情：

 $('#test').attr('readonly', true);