防止在文本字段输入中键入内容，即使字段不是 Disabled/Read-Only

Question

即使我的字段未禁用或只读，我是否可以阻止 HTML 文本字段输入？我有这个需求。

也许我可以通过 JS 或 jQuery 阻止所有输入？

Answer 1

看到这个fiddle

您可以使用 jQuery 来实现。您可以按照下面的方式进行

$('input').keypress(function(e) {
    e.preventDefault();
});

或

你可以 return false 而不是使用 preventDefault()。请参阅下面的脚本

$('input').keypress(function(e) {
    return false
});

见fiddle

或

没有 Javascript 的简化版本如下。只需如下更改 HTML

<input type="text" onkeypress="return false;"/>

见fiddle

Answer 2

您可以在 input 事件上 return false 或使用 .val('') 在每次用户尝试写东西时重置该字段：

$('input').input(function(e) {
    $(this).val('');
});

希望对您有所帮助。

---

$('input').on('input', function(e) {
    $(this).val('');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type='text' />

Answer 3

如果你想让这个领域完整无难度。

$('input').focus(function(e) {
    $(this).blur();
});

示例：https://jsfiddle.net/DinoMyte/up4j39qr/15/

Answer 4

接受的答案对我来说很好，但我还想包括 Shift、Esc 和 删除 键。在这种情况下，使用 keydown 而不是 keypress:

$('input').keydown(function(e) {
  e.preventDefault();
});

文档：https://api.jquery.com/keydown/

Answer 5

如果您正在寻找只读输入，一种简单的方法是将 'readonly' 添加到输入 HTML。例如，

<input type="number" readonly>

有了这个，它不会干扰表单提交或其他事件侦听器。输入 'readonly' 仍会提交，但不会输入 'disabled'.

供参考：https://www.w3schools.com/TAGS/att_input_readonly.asp