Trigger Delete on Keyboard

March 16, 2023

The code snippet provided will Pop Up Alert when Backspace and Delete Key is Pressed on Keyboard with the cursor clicked on the textbox. However, now I want to implement it in my codepen demo here, but I am unsure on how to do it. I want the alert box to pop up only when the cursor is placed on the grey box only if the Backspace and Delete Key is Pressed. I will really appreciate any help I can get.

Click on Text Box and Press on Delete and Backspace for Pop UP
<br>
<input id="input">

<script>
var myinput = document.getElementById('main-container');
input.onkeydown = function() {
  if (event.keyCode == 8) {
    alert('you pressed backspace');
    //event.preventDefault();
  }

  if (event.keyCode == 46) {
    alert('you pressed delete');
    //event.preventDefault();
  }
};

</script>

I have tried var myinput = document.getElementById('zoomPanCont'); , which is the div id but it does not work unfortunately.

>Solution :

I don’t have enough reputation to comment, but does stackoverflow.com/a/48868196 answer your question? You just need to add the tabindex attribute to the div