Ability to detect name of active webform control?

Add-ons Development
#1

Hello all,

As a volunteer, I am helping our local archive to digitize scans of ancient documents. But, since I am an experienced programmer, I would like to make things easier. For that reason I have already created a number of AutoHotKey scripts. These scripts show some ‘most recently used’ names and places and show options in menu’s. This works fine.

At this moment I am trying to improve the process further. For that purpose, I would need to be able to detect (in AutoHotKey) which webform control ‘has focus’. The webforms are maintained by an external company, so I cannot influence them directly.

Basically, the process encompasses two forms:

Webforms

If I could read the name of the control which has focus, I could limit the hotkeys to specific controls and show options, based on the active control too.

Would it be possible to ‘send’ the name of the active control to AutoHotKey using an AddOn and are there any resources which already do stuff like that?
Thanks in advance!

#2

Ability to detect name of active webform control?

That’s a bit tricky. I’m afraid there isn’t a single straightforward answer because the “name” of a field from the end user’s point of view doe may not clearly match the underlying form elements.

HTML form elements hav the concept of a “name” attribute, but this doesn’t match what the user sees. Rather, it’s used for other purposes like matching a form’s input element and label element.

In the case of the screenshot you shared, it looks like the “name” of the fields is actually comes from the placeholder attribute on the input field.

If a site uses a UI framework or implements their own custom solution, the “form elements” seen by the end user may be hevily customized or they might not even use the web’s built-in form elements at all.

Given what you’ve shared so far it sounds like use of placeholder attributes are the most likely match, so here’s a quick JS code snippet that should set the “Voornaam” field in your screenshot:

function setGivenName(newValue) {
  let givenName = document.querySelectorAll('*[placeholder="Voornaam"]');
  if (givenName.length == 0) {
    alert("Element not found");
    return;
  } else if (givenName.length > 1) {
    alert("Multiple candidates found");
    return;
  }
  givenName[0].value = newValue;
}

setGivenName("Simeon")
#3

Hello dotproto,

Thanks for your answer. In the AutoHotKey forum I received an answer too, which suggested I could use Tampermonkey combined with a UserScipt to add the name (or ID) to the Window title. The script I am now using is this:

    ((...elemNames) => {
        const prevTitle = document.title;
        const updateTitle = name => document.title = prevTitle + (name ? ' ' + name : '');
        elemNames.forEach(name => {
            var elem = document.getElementsByName(name)[0];
            if (!elem) {
                console.log("element NOT found by name: " + name);
                elem = document.getElementsByClassName(name)[0];
                if (!elem) {
                    console.log("element NOT found by class: " + name);
                    return;
                }
                else {
                    console.log(elem);
                }
            }
            else {
                console.log(elem);
            }
            if (document.activeElement === elem) updateTitle(name);
                elem.addEventListener('focus', event => updateTitle(event.target.name));
                elem.addEventListener('blur', () => updateTitle(null));
                });
    })('nameFirst', 'namePatroniem', 'nameTussenvoegsel', 'nameLast', 'woonplaats', 'location', 'locationObject', 'locationStraat', 'locationPlaats', 'locationKadaster', 'medium rich-text global rich-text')

As you stated, the name is not a unique identifier. Fortunately, most of the input-fields I use do have unique names and the one that does not, has a unique class. Of course, this may break when the website is modified…

#4

Seems like you’ve got a solid solution. If this was for a widely available extension I’d caution against this approach, but exposing the name of the property via the title is clearly an effective way of making the data available to AutoHotKey.

The only other thing I’d suggest is that you add include or exclude rules to your user script so it only runs on specific sites. Otherwise you may be broadcasting more information than desirable to other applications on the system.

Nicely done :slight_smile:

#5

Thanks for your suggestion. Indeed, safety was also on my mind.

Actually, I have configured the @match parameter of the UserScript so that it only runs on 1 dedicated website (to be honest: I could not get the script to run, unless I configured it correctly ;).

1 Like