如何捕获onkeydown事件的退格
我有一个由文本框的onkeydown
事件触发的函数。 我怎么知道用户是否已经按下了退格键或del键?
尝试这个:
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(); } });
尽pipe将来只要在浏览器中得到广泛支持,您可能需要使用KeyboardEvent
的.key
或.code
属性,而不要使用不赞成的.keyCode
。
值得了解的细节:
-
在keydown事件的处理程序中调用
event.preventDefault()
将防止按键的默认效果。 当按下某个字符时,会阻止它被input到活动的文本字段中。 当按下退格键或在文本字段中删除时,可以防止删除一个字符。 在没有活动文本字段的情况下按下退格键时,在类似Chrome的浏览器中,退格键可让您回到上一页,这样可以防止这种行为(只要通过将事件侦听器添加到document
而不是文本字段来捕获事件即可)。 -
关于如何确定
keyCode
属性的值的文档可以在B.2.1如何确定 W3的UI事件规范中的keydown
和keyup
事件的keyCode
find。 B.2.3固定虚拟键码中特别列出了Backspace和Delete的代码 。 -
目前正在努力
.keyCode
属性,以支持.key
和.keyCode
。 W3将.keyCode
属性描述为“legacy” ,将MDN描述为“deprecated” 。对
.key
和.code
进行更改的一个好处是对非ASCII密钥具有更强大的和程序员友好的处理能力 – 请参阅规范,列出所有可能的密钥值 ,这些值是人类可读的string,如"Backspace"
和"Delete"
并且包括从特定于日语键盘的修饰键到掩盖媒体键的所有值。 另一个与这个问题高度相关的区别在于修改后的按键的意义和被按下的物理键 。在小型Mac键盘上 ,没有Delete键,只有Backspace键。 但是,按Fn + Backspace相当于在普通键盘上按Delete键,即删除文本光标之后的字符,而不是之前的字符。 根据您的使用情况,在代码中,您可能需要按下Backspace ,按下Fn作为Backspace或Delete。 这就是为什么新的关键模型让你select。
.key
属性给出了按键的含义 ,所以Fn + Backspace将产生string"Delete"
。.code
属性为您提供了物理键,所以Fn + Backspace仍然会产生string"Backspace"
。不幸的是,在写这个答案时,只有18%的浏览器支持它们,所以如果你需要广泛的兼容性,那么
.keyCode
就会被“legacy”.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'); } });
在你的function检查键码8(退格)或46(删除)
键码信息
键码列表
不知道它是否在Firefox以外的作品:
callback (event){ if (event.keyCode === event.DOM_VK_BACK_SPACE || event.keyCode === event.DOM_VK_DELETE) // do something } }
如果不是, event.DOM_VK_BACK_SPACE
replace为8
,将event.DOM_VK_BACK_SPACE
replace为46
或将其定义为常量(为了更好的可读性)