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

【问题标题】：Cancel Backspace and all key press when inside a textbox在文本框内取消退格键和所有按键
【发布时间】：2018-10-30 06:58:55
【问题描述】：

我在https://js.do/sun21170/254818 有以下示例代码

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

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

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

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>

【问题讨论】：

为什么不能使用 readonly 属性？
是的，可以使用 JavaScript 或 jquery 取消 Backspace 按键
@madalinivascu，我不能使用只读或禁用属性，因为在我的复杂场景中，当光标仅在某些单词中时，需要禁用文本区域和键。

标签： javascript jquery onkeyup onkeypress

【解决方案1】：

我将onkeypress="keyPressed(event)" 更改为onkeydown="keyPressed(event)"，它可以工作。

【讨论】：

我在最新的 Firefox、Edge、IE 11 和 Chrome 上对此进行了测试。它对所有人都有效。你知道 Safari 是否会支持这个？我没有要测试的 Mac。

【解决方案2】：

你可以使用下面的代码 sn-p:

$(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 文本框或 textAreas，因为此类区域中的退格会导致您离开页面（假设您也想防止退格） .

编辑：代码在 jQuery 中。

【讨论】：

【解决方案3】：

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

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

【讨论】：

【解决方案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>

【讨论】：