特定的键盘事件 [英] Specific keyboard event
问题描述
我正在使用Vue,并且在div内有一个Quill编辑器(这就是为什么我使用已弃用的 DOMSubtreeModified
的原因),并且我想触发一个事件以向其发送API请求将编辑器的内容保存到数据库.
I'm using Vue and I have the Quill editor inside a div (which is why I'm using the deprecated DOMSubtreeModified
), and I want to fire an event to send an API request to save the content of the editor to the database.
现在,以下是我所拥有的,但是删除字符时并没有注册退格键.当有人在编辑器中移动时,我也不想识别箭头键.
Right now, below is what I have but it doesn't register backspace when I delete a character. I also don't want to recognize arrow keys when someone is moving around the editor.
处理此问题的最佳方法是什么?
What's the best way to handle this?
<div
@DOMSubtreeModified="saveFunction($event)">
</div>
推荐答案
这可以使用简单的JavaScript完成:
This can be done using simple JavaScript:
var myElem = document.querySelector('#myElem');
myElem.addEventListener('keydown', (event) => {
if (event.key === "Backspace") {
//Do Something
}
else {
//Do Something (Or Not)
}
});
甚至是jQuery:
$('#myElem').on('keydown', (event) => {
if (event.key === "Backspace") {
//Do Something
}
});
myElem甚至不必是文本框,它可以是没有 contenteditable
属性的< div>
! event.key
是比 event.keyCode
或 event.which
更高的标准.也就是说,根据Mozilla Docs.
myElem doesn't even have to be a text box, it could be a <div>
with no contenteditable
properties!
The event.key
is the newer standard than event.keyCode
or event.which
. That is, according to Mozilla Docs.
希望有帮助...
该链接仍在开发中,但是它显示了如何注册箭头键甚至Shift: https://developer.mozilla.org/zh-US/docs/Web/API/KeyboardEvent/key#Example
This link is still under development but it shows how to register the Arrow Keys and even Shift: https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key#Example
这篇关于特定的键盘事件的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!