How to get track of FormFields Annotation and textField Annotation

abhimanyu · May 22, 2025, 11:25am

WebViewer Version:

Do you have an issue with a specific file(s)?
Can you reproduce using one of our samples or online demos?
Are you using the WebViewer server?
Does the issue only happen on certain browsers?
Is your issue related to a front-end framework?
Is your issue related to annotations?

Please give a brief summary of your issue:
(Think of this as an email subject)

Please describe your issue and provide steps to reproduce it:
(The more descriptive your answer, the faster we are able to help you)
I’m working on a PDF signing and annotation tool using PDFTron. In my application, I have a set of annotation buttons (like text and signature) that can be dragged and dropped onto the PDF. When dropped, they initially appear as TextAnnotations. After dropping, I have a “Save” button that finalizes (or “sticks”) these annotations to the PDF. Users can then type into text fields or apply their digital signature in the signature fields.

I’m using PDFTron’s annotation event listeners (e.g., for annotationChanged) to track actions like adding, modifying, or deleting annotations. However, I’ve noticed that these listeners sometimes work inconsistently. For example, when I drop the annotations, the console logs as expected. But after clicking the “Save” button and finalizing them, sometimes I get the annotation change events (like add, modify, or delete), and sometimes I don’t.

My main goal is to track every interaction with each annotation after the “Save” step—specifically, I want to know when a user signs a signature field or types into a text field. In the future, I want to track which users have signed which fields. For example, if my PDF has two signature fields and only one person signs it, I should be able to detect and log that action in real time.

Could you please guide me on how to reliably listen for such annotation interactions—especially after annotations have been applied—to ensure I can track each activity, including signing and typing?

  annotationManager.addEventListener(
        "annotationChanged",
        (annotations, action) => {  
          console.log("action",action)
          if (action === "delete") {
            console.log("Annotation deleted");
            annotations.forEach((annot) => {
              if (window.fieldMap.has(annot.Id)) {
                setFieldCount((prevCount) => Math.max(prevCount - 1, 0));
                window.fieldMap.delete(annot.Id);
              }
            });
          } else if (action === "add") {
            console.log("Annotation added");
          } else if (action === "modify") {
            console.log("Annotation mofified");
          } 
        }
      );

Please provide a link to a minimal sample where the issue is reproducible:

system · May 22, 2025, 11:25am

Hello, I’m AiRon, an automated tech support bot
While you wait for one of our customer support representatives, I can help you with your question.

Tracking interactions with FormFields and TextField Annotations in WebViewer can be a bit tricky, especially when dealing with events after annotations have been finalized or “stuck” to the PDF. The key is to ensure that event listeners are correctly set up and that you’re capturing all necessary events for your use case.

Some things you can try:

Ensure that you are adding event listeners outside of the documentLoaded event to prevent multiple bindings.

Use the annotationChanged event to track changes and actions like add, modify, and delete.

For tracking specific interactions, such as signing a signature field or typing into a text field, consider using custom logic within the annotationChanged event handler to distinguish between different types of annotations and actions.

To track user-specific actions, you may need to integrate user session data with the annotation data, possibly by storing user information as metadata within annotations.

Consider using the fieldChanged event for form fields, which can give you more granular control over changes to form fields specifically.

Here are some resources that might help you:

Annotation Events: Learn about various annotation events and how to use them effectively.

Working with WebViewer loading events: Understand how to correctly set up event listeners.

Modifying PDF form fields in JavaScript: Learn how to modify and track form fields using event listeners.

Document Collaboration in WebViewer: Explore how to sync and track annotation changes in real-time.

Hopefully, this helps you solve your problem while you wait for a human to get back to you.

kkim · May 22, 2025, 4:41pm

Hi there,

My main goal is to track every interaction with each annotation after the “Save” step—specifically, I want to know when a user signs a signature field or types into a text field. In the future, I want to track which users have signed which fields. For example, if my PDF has two signature fields and only one person signs it, I should be able to detect and log that action in real time.

You can track when a user signs a signature field via signatureTool’s locationSelected event:

Or using the signatureWidget’s events:

Then you can see if the widget has been signed via the isSignedByAppearance method:

For keeping track of each character a user types, you will want to add an event listener to the DOM element like so:

const { Annotations } = instance.Core;
        const createInnerElement = Annotations.TextWidgetAnnotation.prototype.createInnerElement;
        Annotations.TextWidgetAnnotation.prototype.createInnerElement = function () {
            const textField = this;
            const el = createInnerElement.apply(this, arguments);
            el.addEventListener('input', () => {
                console.log('check textField clicked', textField.fieldName);
            });
            return el;
        };

Please note that if you are using WebViewer 11 or higher, the default way of signing signatures is now via appearance:

The behaviour for the annotationChanged event will be slightly different for each signing method so you will want to stick to one method.

best regards,
Kevin