在文本框内取消退格键和所有按键

Question

处有以下示例代码

我的目标是防止在不使用 readOnly 或 disabled 属性的情况下编辑文本框内的文本。在上面的演示代码中，我在按下退格键时取消了 keyup 事件，但这没有任何效果。

问题：是否可以在不使用 readOnly 或 disabled 属性的情况下使用 JavaScript 或 jquery 取消退格键按下文本框？

我的demo代码也贴在下面

function keyPressed(e) { 
  e.preventDefault();
}
       
function keyUp(e) {
  e.preventDefault();
}

#text1 {
  width:500px;
}

<input type="text" id="text1" onkeypress="keyPressed(event)"     
         onkeyup="keyUp(event)" value="This is some text that should not be editable"></input>

Answer 1

我把onkeypress="keyPressed(event)"改成了onkeydown="keyPressed(event)"，效果不错。

Answer 2

您可以使用以下代码片段：

$(document).keydown(function (e) {
                var element = e.target.nodeName.toLowerCase();
                if ((element != 'input' && element != 'textarea') || $(e.target).attr("readonly") || (e.target.getAttribute("type") ==="checkbox")) {
                    if (e.keyCode === 8) {
                        return false;
                    }
                }
});

实现此类功能时需要牢记某些事项，您还应该检查 readyOnly textBoxes 或 textAreas，因为此类区域中的退格会导致您离开页面（假设您希望防止退格，因为嗯）。

编辑：代码在jQuery.

Answer 3

将您的 onkeypress 事件更改为 onkeydown，您的代码也可以使用退格键和删除按钮。 onkeyup 事件不是必需的

<input type="text" id="text1" onkeydown="keyPressed(event)" value="This is some text that should not be editable"></input>

Answer 4

我认为你必须触发 keydown 事件。但这是一个有效的例子。只需给出您不想更改的每个输入 class notEditable 和 jquery 代码将阻止输入字段被编辑。

$('.notEditable').on('change keydown', function(e){
         e.preventDefault();
});

#text1 {
      width:500px;
   }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="text1" class="notEditable" value="This is some text that should not be editable"></input>

这段代码更简洁一些，因为您只需添加 class 而不需要在 html 代码中调用函数。但是，如果您想在代码中保留函数调用，只需将输入字段更改为：

<input type="text" id="text1" onkeypress="keyPressed(event)" onkeydown="keyUp(event)" value="This is some text that should not be editable"></input>

在文本框内取消退格键和所有按键

Cancel Backspace and all key press when inside a textbox

javascript

jquery

onkeyup

onkeypress