如何使用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出现以下错误：“名称为'myfancyname'的无效表单控件不能聚焦。”

Answer 1

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

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

我对用例感到好奇，因为如果您需要一个用户不能更改任何内容的字段，那为什么不使用span ， p或除input元素以外的任何内容

Answer 2

似乎没有完全解决方法如何处理原始问题。

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

Answer 3

在您的js中执行以下操作：

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