Select all Text when entering a Textfield

Technical Support WebViewer
, , ,
1

WebViewer Version:
8.10.0 (also occurs on 8.12.0)

Do you have an issue with a specific file(s)?
No

Can you reproduce using one of our samples or online demos?
Yes

Are you using the WebViewer server?
Yes

Does the issue only happen on certain browsers?
No

Is your issue related to a front-end framework?
No

Is your issue related to annotations?
Yes

Tested in our Web-Application and with the online demo.

When entering a Textfield on Windows (or general Desktop) via Tab, the whole Text in the Textfield is selected, on iOS the cursor is placed at the end of the text.

First i thougt: Okay, then i listen for “onFieldSelected” and use a function like “selectAllText” or something similar. But as i found, there is no “onFieldSelected” or “onFieldEntered” or something like this (How to catch event click/focus to widgetAnnotation( textField, checkbox, ...)?)

Is there a way to change the behavior on iOS, so that all Text inside a Textfield is selected when tabbed in via Tabulator?

Best regards

Christian

2

No chance to get a behavior like on Windows?

3

Hi Chris,

We will look into this, and see if there is a way.

Best Regards,
Ahmad Moaaz
Software Developer
Apryse

4

Hello Ahmad,

thank you! I’m looking forward to your answer :slight_smile:

Best Regards

Christian

5

Hello chris,

Apologies for the delay, you can select all the text on the text widget by accessing its innerElement and then calling the select() function like so:

instance.Core.annotationManager.getAnnotationsList()[0].innerElement.select()

The innerElement is an HTML input tag, so all the regular HTML functions and events apply :slight_smile:

Best regards,
Tyler Gordon
Platform Support Team Lead
Apryse Software

6

Hello Tylor,

unfortunately this doesn’t work. I’m using Angular as Framework and if i try your solution as follows:

      const annot = this.webviewer.instance.Core.annotationManager.getAnnotationsList()[0];
      annot.innerElemnt.select();

The following error occurs:

image
image1722×109 10.5 KB

If i try to cast ist:

      const annot = this.webviewer.instance.Core.annotationManager.getAnnotationsList()[0];
      (annot as any).innerElemnt.select();

It crashes at runtime:

image
image698×499 19.5 KB

But even if it would work, i would still have the problem, that i don’t know when to call this function, because ther is no onEnter-Event for the form field?!

Best regards,

Christian

7

Hello chris,
My apologies i should have clarified on the code

this.webviewer.instance.Core.annotationManager.getAnnotationsList()[0];

is supposed to be an instance of the widget you want to select all the text from, a better snippet would be:

textWidget.innerElement.select()

You can listen to the onfocus event on the HTML element itself and call it, you can run this script when the document is loaded.

instance.Core.annotationManager.getAnnotationsList().forEach((annot)=>{
    if(annot instanceof instance.Core.Annotations.TextWidgetAnnotation) {
        annot.innerElement.onfocus = annot.innerElement.select();
    }
})

best regards,
Tyler Gordon

8

Hello Tylor,

i tried the solution and it works, but i needed a few small adjustments.

  • I “casted” the innerElement as HTMLInputElement, otherwise the angular compiler won’t compile it (or throws an error at runtime) because of onfocus isn’t available.
  • For my needs i also registered a onclick/onkeydown-Event to differntiate between Select via Click or Tab (for this to work a small timeout is needed, because onclick/onkeydown is fired before onfocus)
  • The whole code is executed within a function which is called when the annotationsLoaded-Event is fired. This function is also called after a small timeout, because otherwise sometimes the innerElement of the annotation-Element was empty.

The function itself:

  /**
   * Setzt bei allen Formularfeldern ein Fokus-Event, damit beim Sprung per Tab
   * in das Formularfeld der Text markiert wird
   */
  private setOnFocusEvent(): void {
    // Alle Objekte durchlaufen
    this.webviewer.instance.Core.annotationManager.getAnnotationsList().forEach((annot) => {
      if (annot instanceof this.webviewer.instance.Core.Annotations.TextWidgetAnnotation) {
        // In ein HTMLInputElement "casten"
        const input = annot.innerElement as HTMLInputElement;

        // Falls das Element vorhanden ist/gecastet werden konnte
        if (input !== null) {
          // Falls per Klick selektiert wird
          // -> Text soll nicht selektiert werden
          input.onclick = () => {
            this._selectAllText = false;
          };

          // Falls per Tabulator selektiert wird
          // -> Text soll selektiert werden
          input.onkeydown = () => {
            this._selectAllText = true;
          };

          // Wenn das Element den Fokus erhaelt evtl. den Text selektieren
          input.onfocus = () => {
            // In einem Timeout, da onclick/onkeydown vor onfocus ausgefuehrt wird
            setTimeout(() => {
              // Falls noetig Text selektieren
              if (this._selectAllText === true) input.select();
              // Flag zuruecksetzen
              this._selectAllText = false;
            }, 100);
          };
        }
      }
    });
  }

Calling the Function within annotationsLoaded-Event

    this.webviewer.instance.Core.documentViewer.addEventListener('annotationsLoaded', () => {
         // Nach einem Timeout die Events setzen
         // (damit auch alle Felder schon das innerElement haben)
        setTimeout(() => {
           this.setOnFocusEvent();
         }, 500);
    }

Best regards

Christian