特定的键盘事件 [英] 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屋！