Utilizing 'document.execCommand' for handling 'delete' key events in AngularJS

Question

Utilizing 'document.execCommand' for handling 'delete' key events in AngularJS

Here is a demo plunkr link that I have created to demonstrate the issue.

I am looking to implement the strikeThrough command whenever there is a delete operation. For instance:

If the user selects "Text" and presses the delete or backspace key, it should be displayed as ~~Test~~. It shouldn't just disappear. Can anyone provide assistance with this?

$container.bind('keydown keyup', function (e) {
    console.log(e)
    if(e.keyCode===8 || e.keyCode===46){
        $document[0].execCommand('strikeThrough', false); // line 1
        e.preventDefault();  // line 2
    }
});

I can capture the events as shown above, but facing difficulties in making both line 1 and line 2 work together. Is there a way to prevent the deletion event and execute the execCommand successfully?

javascript angularjs keyevent

Answer 1

Answer №1

You have bound the event "twice".

It's not about it not functioning, it's about it functioning twice.

To correct the code, make the following changes:

$container.bind('keyup', function (e) {
    console.log(e)
    if(e.keyCode===8 || e.keyCode===46){
        $document[0].execCommand('strikeThrough', false); // line 1
        e.preventDefault();  // line 2
    }
});
$container.bind('keydown', function (e) {
    console.log(e)
    if(e.keyCode===8 || e.keyCode===46){
        e.preventDefault();  // line 2
    }
});

Answer 2

You have bound the event "twice".

It's not about it not functioning, it's about it functioning twice.

To correct the code, make the following changes:

$container.bind('keyup', function (e) {
    console.log(e)
    if(e.keyCode===8 || e.keyCode===46){
        $document[0].execCommand('strikeThrough', false); // line 1
        e.preventDefault();  // line 2
    }
});
$container.bind('keydown', function (e) {
    console.log(e)
    if(e.keyCode===8 || e.keyCode===46){
        e.preventDefault();  // line 2
    }
});

Utilizing 'document.execCommand' for handling 'delete' key events in AngularJS

Answer №1

Similar questions

Communication between Nodemailer and Mailgun

How about a fading effect for the select box?

Transferring a list from MVC ViewBag to JavaScript

Tips for submitting a form with multiple fields that share the same name attribute using ajax:

How can we modify this function to interpret multiple selections at once?

looking to implement auto-scroll feature in flatlist using react native

All Select function malfunctioning

What is the best way to incorporate this custom file upload button, created with vanilla JavaScript, into a React application?

What is the best way to redirect to the login page using the PUT method in express.js when the user is not authenticated?

Position does not exist

Press the div, excluding the button - Vue

Puppeteer experiencing issues with missing relative modules and dependencies not being found

Vue alert: The instance does not have a defined "hp" property or method, but it is referenced during rendering

Leveraging the power of jquery-tmpl with the responseText

What is the best way to dynamically update the selected option in a dropdown menu within a Rails application using a variable?

Guide on configuring Angular validation to trigger on blur events and form submission

Troubleshooting problem with list rendering in a Nativescript-vue GridLayout

The reflight response received an unexpected HTTP status code of 500

Ensure that children elements are aligned to the bottom by setting the axis of the HTML

Learning how to replace the alert function with Bootbox