Any way to determine which control of a webform has focus? Topic is solved

[V4Friend]

Hello AutoHotKey specialists and others (like myself),

As I have stated in my previous question, I am busy working as a volunteer to digitize ancient archive information.
All volunteers can sign in, view scans of old documents and then digitize data by marking part of the scan (which shows the handwritten name of a person) and entering the data into a web-form using the keyboard. I have already managed to reduce the labour using some AHK-scripts.

At this moment, all hotkeys are 'always ON', regardless of the input-field which has focus. But it would be much nicer if the 'Place Name' keys would only work when the PlaceName input-field has focus and so on. So the big question is this: is it possible to determine which input-field on the web-form has focus? I know this question has been asked before, but maybe someone found a nice work-around in the mean time?

I have asked a similar question in the Firefox Addon forum, but no answers yet. It would be nice, for example, if the name of the control which has focus was added to the URL, so AHK could read it. But, as you may have expected, I cannot modify the code of the website. So it would have to be done by some external tooling...

Thanks in advance!

[teadrinker]

A variant of the solution is Tampermonkey extension for Firefox + custom javascript that will track a focus change event on a page, and add to the page title information about which element is in focus. Accordingly, you will be able to use #HotIf in AutoHotkey script.

[V4Friend]

Hello teadrinker,

Thanks for your answer: that sounds like a viable solution!
Maybe it's a bit cheeky, but: could you provide a Hello-World-level example of the code? It sounds like you have done stuff like this before and it's always good to start from a working basis...

[teadrinker]

The solution will depend on how the required elements are described in html. For example, on this page there are two search fields with id keywords and search_keywords. If you run this script on this page

Code: Select all

((...elemIds) => {
    const prevTitle = document.title;
    const updateTitle = id => document.title = prevTitle + (id ? ' ' + id : '');
    elemIds.forEach(id => {
        const elem = document.getElementById(id);
        if (!elem) return;
        if (document.activeElement === elem) updateTitle(id);
        elem.addEventListener('focus', event => updateTitle(event.target.id));
        elem.addEventListener('blur', () => updateTitle(null));
    });
})('keywords', 'search_keywords')

the title will have " keywords" or " search_keywords" appended to it, depending on which element has the focus. If none of them have focus, the title will become what it originally was.

[V4Friend]

OK, so that piece of JavaScript should be used by Tampermonkey to add the ID of the control to the window title?: I will try if I can make that part work.

Two more questions: when I inspect the source of the website, I see this:

Code: Select all

        <!-- Persons Pop-up -->
        <fieldset class="annotation-popup__value annotation-popup__value--name">
            <label>Invoer</label>
            <input type="text" name="nameFirst" class="name-first "placeholder="Voornaam"><input type="text" name="namePatroniem" class="name-patroniem "placeholder="Patroniem"><input type="text" name="nameTussenvoegsel" class="name-middle "placeholder="Tussenvoegsel"><input type="text" name="nameLast" class="name-last "placeholder="Achternaam"><input type="text" name="woonplaats" class="woonplaats "placeholder="Woonplaats">        </fieldset>

So it seems to me that no IDs are used. Is the script easily modified to use the element names (like namePatroniem) instead?

On the AddOn forum I read that 'a typical AddOn' also contains JavaScript. So it should, in theory, be possible to create a dedicated AddOn for this use-case?

[V4Friend]

OK, so I have modified the JavaScript a little:

Code: Select all

    <script>

        ((...elemNames) => {
            const prevTitle = document.title;
            const updateTitle = name => document.title = prevTitle + (name ? ' ' + name : '');
            elemNames.forEach(name => {
                const elem = document.getElementsByName(name)[0];
                if (!elem) {
                    console.log("element NOT found: " + name);
                    return;
                }
                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')

    </script>

It's now checking the elements with a specific name and successfully adds the name to the Title of the browser tab, when the control 'has focus' (and back to original, when it has not). On to the next challenge: how can you make a Hotif that checks if a specific control has focus? Is it possible to read the title of browser tabs (in my case: Firefox)?

[teadrinker]

The title of the browser window corresponds to the name of the active tab, you can see this if you enable the title bar display in the settings.

[V4Friend]

Aha! What seems like a no-brainer to the guru, can be hard for the noob (me)

Entering one simple statement does the trick

Code: Select all

#HotIf WinActive("MyWebsite nameFirst")

Now I'll have to see if I can get it to work using Tampermonkey.

About my other question: does anyone have experience creating an Addon for Firefox? For myself, the installation procedure does not have to be utterly simple, but if other volunteers also like to use this solution, it would be nice if they only have to install one piece of code (or two, if you also count AHK). Mind you: most volunteers are 60+

[V4Friend]

OK, a little bit of feedback. I managed to get the monkey to work . The most 'difficult' thing was to set the @match variable to exactly the correct URL for my target. Which is a good thing, because now the script only works for the URL where I want to use it...

Now I can fiddle with my AHK scripts a bit more. I can now assign the same keys to similar functions for different controls. So I don't have to remember many keys: about 3 of them will do the job