# How to prevent default behaviour on Delete key pressing on DocumentViewer?

**URL:** <https://pdfjs.community/t/how-to-prevent-default-behaviour-on-delete-key-pressing-on-documentviewer/2859>\
**Category:** Technical Support\
**Created:** [September 29, 2023, 10:19am UTC](https://pdfjs.community/t/how-to-prevent-default-behaviour-on-delete-key-pressing-on-documentviewer/2859 "2023-09-29T10:19:33Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![dorota.k](https://avatars.discourse-cdn.com/v4/letter/d/e79b87/32.png) [@dorota.k](https://pdfjs.community/u/dorota.k)\
**Post date:** [September 29, 2023, 10:19am UTC](https://pdfjs.community/t/how-to-prevent-default-behaviour-on-delete-key-pressing-on-documentviewer/2859/1 "2023-09-29T10:19:33Z")

</div>

Hi there,

**Which product are you using?**  
PDF.js Express Plus

**PDF.js Express Version**  
8.4.0

**Detailed description of issue**  
I created a custom UI in my project, and `documentViewer` like that:

```javascript
`new Core.DocumentViewer()`
documentViewer.loadDocument(fileUrl).then(...)

```

That’s why I don’t have `instance` object, so I cannot follow [this topic](https://pdfjs.community/t/unable-to-prevent-keyboard-events-of-copy-paste-annotation/254) to prevent `Delete` key pressing behaviour. I see that, when I press the `Delete` key, the `delete` action (for `annotationManager`) is triggered and the annotation vanishes from the PDF file. I don’t want to that.

I tried to define addEventListener for `documentViewer` and stop `Delete` key by `preventDefault` or `stopPropagation`, but it doesn’t work. I even tried to get an advice from [this topic](https://pdfjs.community/t/how-to-add-confirmation-pop-up-before-deleting-any-annotation/1291), but the only effect, that I can achieve, is an infinite loop.  
OK, I could probably prevent this with the `document` (not `documentViewer`), but I still want to use `Delete` key in a form, when an annotation is selected.

In my case, is it even possible to programatically stop deleting annotations after pressing `Delete` key?

Thanks for any help,  
Dorota

---

<div class="post-metadata">

**Author:** ![darian.chen](https://avatars.discourse-cdn.com/v4/letter/d/3d9bf3/32.png) [@darian.chen](https://pdfjs.community/u/darian.chen)\
**Post date:** [October 2, 2023, 8:14pm UTC](https://pdfjs.community/t/how-to-prevent-default-behaviour-on-delete-key-pressing-on-documentviewer/2859/3 "2023-10-02T20:14:45Z")

</div>

Hello Dorota,

You can get the instance by importing the getInstance function from the WebViewer library.  
This will allow you to use the instance to disable any hotkeys.

[https://pdfjs.express/api/global.html#getInstance\_\_anchor](https://pdfjs.express/api/global.html#getInstance__anchor)

Also, the latest version of pdf.js Express is 8.7, we recommend updating to the latest version of if possible.

If this doesn’t work, could you please provide a sample project?

Best Regards,  
Darian Chen

---

<div class="post-metadata">

**Author:** ![dorota.k](https://avatars.discourse-cdn.com/v4/letter/d/e79b87/32.png) [@dorota.k](https://pdfjs.community/u/dorota.k)\
**Post date:** [October 3, 2023, 8:54am UTC](https://pdfjs.community/t/how-to-prevent-default-behaviour-on-delete-key-pressing-on-documentviewer/2859/4 "2023-10-03T08:54:25Z")

</div>

Hi Darian,

Thanks for the advice. Unfortunately, this won’t help in my case.

To create my own UI, I followed [this tutorial](https://pdfjs.express/documentation/ui-customization/core). Therefore I cannot import anything from `@pdftron/webviewer`. Is there another solution to use your great library?

Considering version 8.7 - I checked 8.7.4 and in my case it is not useful because the library throws an error:  
 ![image](https://canada1.discourse-cdn.com/flex031/uploads/pdfjscommunity/original/2X/d/d13d80a12b00c4856b91ec47ba3ca58183edd21a.png)  
from this line in `PDFJSDocumentType.js` file:  
`window.instance.addSearchListener(function(searchValue, options, results)`  
and pdf is not loaded. Perhaps this is the “instance”, but I don’t have it.

If you need more clarification, just let me know.

Best regards,  
Dorota

---

<div class="post-metadata">

**Author:** ![darian.chen](https://avatars.discourse-cdn.com/v4/letter/d/3d9bf3/32.png) [@darian.chen](https://pdfjs.community/u/darian.chen)\
**Post date:** [October 3, 2023, 7:41pm UTC](https://pdfjs.community/t/how-to-prevent-default-behaviour-on-delete-key-pressing-on-documentviewer/2859/5 "2023-10-03T19:41:33Z")

</div>

Hello Dorota,

After taking a closer look at our documentation on hotkeys guide, it appears that we do not have an available hotkey for the delete key, so I don’t think this method will work.

Hotkeys: [PDFJS Express WebViewer Namespace: Hotkeys](https://pdfjs.express/api/UI.Hotkeys.html)

You mentioned that you tried adding a confirmation popup before deleting and that causes an infinite loop? Could you explain this in more detail? What errors are you receiving and could you provide the code?

One possible solution could be to redraw the annotation whenever a user deletes it. Would something like this work for you?

Best Regards,  
Darian Chen

---

<div class="post-metadata">

**Author:** ![darian.chen](https://avatars.discourse-cdn.com/v4/letter/d/3d9bf3/32.png) [@darian.chen](https://pdfjs.community/u/darian.chen)\
**Post date:** [October 4, 2023, 8:29pm UTC](https://pdfjs.community/t/how-to-prevent-default-behaviour-on-delete-key-pressing-on-documentviewer/2859/6 "2023-10-04T20:29:20Z")

</div>

Hello Dorota,

Another solution could be to set the NoDelete property on the annotations to true when adding.

```javascript
  annotationManager.addEventListener('annotationChanged', (annotations, action) => {
    if (action === 'add') {
       annotations.forEach(annotation => {
         annotation.NoDelete = true;
       });
    }
  });

```

Let me know if this helps.

---

<div class="post-metadata">

**Author:** ![dorota.k](https://avatars.discourse-cdn.com/v4/letter/d/e79b87/32.png) [@dorota.k](https://pdfjs.community/u/dorota.k)\
**Post date:** [October 5, 2023, 7:32am UTC](https://pdfjs.community/t/how-to-prevent-default-behaviour-on-delete-key-pressing-on-documentviewer/2859/7 "2023-10-05T07:32:49Z")

</div>

Hello Darian,

Great, thank you, `NoDelete` is the solution for me. I thought it would be possible to disable the Del key, but the simpler, the better.

Best regards,  
Dorota

---

<div class="post-metadata">

**Author:** ![darian.chen](https://avatars.discourse-cdn.com/v4/letter/d/3d9bf3/32.png) [@darian.chen](https://pdfjs.community/u/darian.chen)\
**Post date:** [October 5, 2023, 1:28pm UTC](https://pdfjs.community/t/how-to-prevent-default-behaviour-on-delete-key-pressing-on-documentviewer/2859/8 "2023-10-05T13:28:21Z")

</div>

Hello Dorota,

Glad that worked for you.

After speaking with my team, it is possible to disable the delete key. The delete key is actually under the tools namespace instead of UI.Hotkeys.

On WebViewer, it would look like the link below, but this should also work for PDF.js Express.

> **[Prevent the deletion of annotations on pressing the delete key.](https://community.apryse.com/t/prevent-the-deletion-of-annotations-on-pressing-the-delete-key/3656)**
>
> Here is how you can override this in the latest versions. const { Tools } = instance.Core; const DELETE\_KEY = 46; const BACKSPACE = 8; const originalKeyDown = Tools.AnnotationSelectTool.prototype.keyDown;...

Feel free to use either solution.

---

<div class="post-metadata">

**Author:** ![dorota.k](https://avatars.discourse-cdn.com/v4/letter/d/e79b87/32.png) [@dorota.k](https://pdfjs.community/u/dorota.k)\
**Post date:** [October 6, 2023, 8:44am UTC](https://pdfjs.community/t/how-to-prevent-default-behaviour-on-delete-key-pressing-on-documentviewer/2859/9 "2023-10-06T08:44:14Z")

</div>

Hi Darian,

Yes! This is exactly what i meant earlier 🤩. This solution is even beter, because I don’t have to remember to “unblock” the deletion if I want to programatically remove annotations. Also, I just realized that `Backspace` button behaves the same way 😵 (although it should be obvious for me). Thank you for all your help.

Best regards,  
Dorota