Specific keyboard event

Question

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>

Possible duplicate of [Detect changes in the DOM](https://stackoverflow.com/questions/3219758/detect-changes-in-the-dom) — Vikasdeep Singh, Jul 26 '18 at 01:08

Da Mahdi03 · Accepted Answer · 2018-08-19T23:10:29.510

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)
    } 
});

Or even jQuery:

$('#myElem').on('keydown', (event) => {
    if (event.key === "Backspace") {
        //Do Something
    }
});

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.

Hope that helps...

Edit: 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

Specific keyboard event

1 Answers1

Linked