Tracking pdf form feilds while editing them

Hi @PDFtron ,
can anyone let me know if there is any way i can track form feilds in fillable pdfs while filling them using pdftron Sdk/s or webviewer.

Hello indranath,

What type of tracking do you have in mind? The AnnotationManager fires an event named fieldChanged which you can attach a listener to. AnnotationManager fieldChanged

You can also iterate through the fields if you wish to gather info on each. For this you would use the FieldManager.

Best Regards,

Armando Bollain
Software Developer
PDFTron Systems, Inc.
www.pdftron.com

Hey, I would like to open that question again.
I would like to track ongoing changes of form fields. The fieldChanged event does trigger only when loosing the focus, but not while entering new characters. Would that be possible with some other event?
Especially for me it is important that I can export that current change via the exportAnnotationCommand function.

Regards,
Denis

Hi there,

To listen to every character typed, you should create an inner element on the Text Field and on it, you will listen to the DOM “input” event. Here is a guide with more explanation about this topic, the last example of it shows how to create the inner element. Below is a code snippet you can use to listen when keys are pressed on your Text input fields.

WebViewer({
...
}), document.getElementById('viewer')).then(instance => {
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;
};
})

Best regards,
Kevin Kim

Hey, thank you for the fast response.
Would that also help if I want to export the change then via exportAnnotationCommand? As I need to sync this to another instance of the webviewer for another user.

Regards,
Denis

Hi there,

You would need to trigger a modify action for the annotation, so doing something like the following can work:

const createInnerElement = Annotations.TextWidgetAnnotation.prototype.createInnerElement;
Annotations.TextWidgetAnnotation.prototype.createInnerElement = function () {
    const textField = this;
    const el = createInnerElement.apply(this, arguments);
    el.addEventListener('input', async (e) => {
        const textFieldAnnot = textField.getField();
        textFieldAnnot.value = textField.value;
        console.log(await annotationManager.exportAnnotationCommand())
    });
    return el;
};

Best regards,
Kevin Kim

great, thank you a lot!