How can I capture repeated inputs from an external device in Blazor?

Question

Please note that I have no affiliation with the two links in the next paragraph, nor am I recommending the products. I linked them purely to clarify what I'm talking about in my question.

The requirement is to have a Blazor page where the users has a pile of RFID key fobs (such as these) and an RFID reader (such as this), and needs to tap each fob on the device, and have the Blazor page register the input. When you tap a fob, the device sends the PC the fob's serial number followed by a carriage return, exactly as if you'd typed this on your keyboard.

I'm struggling to work out how to do this in Blazor. Ideally, I don't want a visible input control on the page, and I certainly don't want one where the user can change the input value. The attention span of the person tapping these fobs will probably be in line with the amount they are getting paid (ie not much!), and I need it to be as simple and fool proof as possible. If there is any chance of them changing the input value or setting the focus on some other element, they almost certainly will.

Disabling, or setting the element to readonly prevents any input from being accepted, so that doesn't work.

Anyone any idea how I capture the input? I can use an <input> tag, or the Blazor equivalent, but apart from the problem mentioned above, it has the bigger issue of keeping focus. Whilst I get the input on the first tap, the element loses focus after that, and I haven't managed to work out how to get it back.

I tried the techniques described in answers to this question (and others), but all suffered from the same problem. In most cases, the @ref to the input element was null. Even when I managed to get a non-null reference to the element, trying to set the focus just didn't work. I didn't get any errors, it just didn't set the focus, so I could only get the input from the first tap.

Anyone any suggestions? Thanks

Are the 'repeated inputs' treated as keyboard devices and input? If so you could probably use a simple JavaScript approach to monitor 'text events' on the entire document. Much like this answer https://stackoverflow.com/a/49331664/591285 — clamchoda, Jun 27 '22 at 19:29
@clamchoda Yes, the inputs are coming from a user repeatedly tapping a fob on a reader, much like the user in that question repeatedly scanning bar codes. However, if you look at Matt's answer, you can see the basics, without any JavaScript. My only question at the moment is how to refocus the `
` if the user clicks somewhere else. As far as I can see, your linked answer doesn't address that part either. Thanks for the comment. — Avrohom Yisroel, Jun 28 '22 at 20:05
In the solution I linked there is no need for focus to capture the input. As long as your blazor page is open, the document event listener will capture your input and you can response accordingly. — clamchoda, Jun 28 '22 at 20:15

score 1 · Answer 1 · answered Jun 26 '22 at 21:54

Does this help? You need to add a tabindex to something that isn't normally focusable to be able to use something like onkeyup and onkeydown.

You can do this with a normal div if you add the tabindex, that way they can't see or edit the text, they could still manually type on there though.


@inherits LayoutComponentBase

<PageTitle>RFID</PageTitle>

<div class="page" @ref="focusRef" tabindex="0"  @onkeyup="KeyPress">
    <div class="sidebar">
        <NavMenu />
    </div>

    <main>
        <div class="top-row px-4">
            <a href="https://learn.microsoft.com/aspnet/" target="_blank">About</a>
        </div>

        <article class="content px-4">
            @Body
        </article>
    </main>
</div>


@code {
    ElementReference focusRef;

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            await focusRef.FocusAsync();
        }
        await base.OnAfterRenderAsync(firstRender);
    }

    string s = "";
    async Task KeyPress(KeyboardEventArgs args)
    {
        s += args.Key;
    }
}

Thanks, that gets me a long way, but it doesn't get around the issue of what happens if/when they click on something. That takes away focus from the `
`, so subsequent taps aren't handled. Any idea how I get around that? Thanks — Avrohom Yisroel, Jun 28 '22 at 19:12
transparent overlay div covering the whole screen? timer job that keeps resetting focus if it's lost? — Matt, Jun 29 '22 at 08:46

How can I capture repeated inputs from an external device in Blazor?

1 Answers1