我有一个由onkeydown
文本框事件触发的函数。如何判断用户是否按下了退格键或 del 键?
如何在 onkeydown 事件中捕获退格
试试这个:
document.addEventListener("keydown", KeyCheck); //or however you are calling your method
function KeyCheck(event)
{
var KeyID = event.keyCode;
switch(KeyID)
{
case 8:
alert("backspace");
break;
case 46:
alert("delete");
break;
default:
break;
}
}
如今,执行此操作的代码应如下所示:
document.getElementById('foo').addEventListener('keydown', function (event) {
if (event.keyCode == 8) {
console.log('BACKSPACE was pressed');
// Call event.preventDefault() to stop the character before the cursor
// from being deleted. Remove this line if you don't want to do that.
event.preventDefault();
}
if (event.keyCode == 46) {
console.log('DELETE was pressed');
// Call event.preventDefault() to stop the character after the cursor
// from being deleted. Remove this line if you don't want to do that.
event.preventDefault();
}
});
尽管在未来,一旦它们在浏览器中得到广泛支持,您可能希望使用 的.key
或.code
属性KeyboardEvent
而不是已弃用的.keyCode
.
值得了解的细节:
调用
event.preventDefault()
keydown 事件的处理程序将阻止按键的默认效果。当按下一个字符时,这会阻止它被输入到活动文本字段中。在文本字段中按退格键或删除键时,可防止删除字符。当在没有活动文本字段的情况下按退格键时,在像 Chrome 这样的浏览器中,退格键会将您带回上一页,它会阻止这种行为(只要您通过添加事件侦听器document
而不是文本字段来捕获事件)。关于如何
keyCode
确定属性值的文档可以在 W3 的 UI 事件规范中的B.2.1 如何确定keyCode
forkeydown
和keyup
事件中找到。特别是 Backspace 和 Delete 的代码在B.2.3 固定虚拟键代码中列出。正在努力弃用该
.keyCode
属性以支持.key
和.code
。W3 将该.keyCode
属性描述为"legacy",MDN 描述为"deprecated"。更改
.key
和 的一个好处.code
是对非 ASCII 键进行更强大且对程序员友好的处理 - 请参阅列出所有可能键值的规范,这些键值是人类可读的字符串,例如"Backspace"
和"Delete"
,包括从特定修饰键开始的所有内容的值到日语键盘以隐藏媒体键。另一个与此问题高度相关的问题是区分修改后的按键和按下的物理按键的含义。在小型 Mac 键盘上,没有Delete键,只有一个Backspace键。但是,按Fn+Backspace相当于Delete在普通键盘上按- 也就是说,它会删除文本光标之后的字符而不是它之前的字符。根据您的用例,在代码中,您可能希望将按下的Backspace与处理Fn为退格键或删除键。这就是为什么新的密钥模型让您选择的原因。
该
.key
属性为您提供了按键的含义,因此Fn+Backspace将产生字符串"Delete"
。该.code
属性为您提供物理键,因此Fn+Backspace仍会产生字符串"Backspace"
。不幸的是,在撰写此答案时,它们仅在 18% 的浏览器中受支持,因此如果您需要广泛的兼容性
.keyCode
,则暂时无法使用“遗留”属性。但是,如果您是未来的读者,或者您的目标是特定平台并且知道它支持新界面,那么您可以编写如下所示的代码:document.getElementById('foo').addEventListener('keydown', function (event) { if (event.code == 'Delete') { console.log('The physical key pressed was the DELETE key'); } if (event.code == 'Backspace') { console.log('The physical key pressed was the BACKSPACE key'); } if (event.key == 'Delete') { console.log('The keypress meant the same as pressing DELETE'); // This can happen for one of two reasons: // 1. The user pressed the DELETE key // 2. The user pressed FN+BACKSPACE on a small Mac keyboard where // FN+BACKSPACE deletes the character in front of the text cursor, // instead of the one behind it. } if (event.key == 'Backspace') { console.log('The keypress meant the same as pressing BACKSPACE'); } });
event.key === "退格" 或 "删除"
更新更干净:使用event.key
. 没有更多的任意数字代码!
input.addEventListener('keydown', function(event) {
const key = event.key; // const {key} = event; ES6+
if (key === "Backspace" || key === "Delete") {
return false;
}
});
不确定它是否在 Firefox 之外工作:
callback (event){
if (event.keyCode === event.DOM_VK_BACK_SPACE || event.keyCode === event.DOM_VK_DELETE)
// do something
}
}
如果没有,请更换event.DOM_VK_BACK_SPACE
与8
和event.DOM_VK_DELETE
与46
或将它们定义为常数(更好的可读性)