Question

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

问题：是否可以在文本框内使用JavaScript或jquery取消Backspace键的按下，而不使用文本框的readOnly或Disabled属性？

我的演示代码也粘贴在下面。

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事件。但这是一个可行的例子。只需输入您不想更改类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>

此代码更加简洁，因为您只需添加类，而无需在html代码中调用函数。但是，如果您希望将函数调用保留在代码中，只需将输入字段更改为：

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

在文本框内时取消Backspace和所有按键

4 个答案: