Send key from keyup trigger

[nickleman]

Is there a way to include in an hx-get the key that triggered a keyup? Something like: /key?key=a

Thanks.

[jreviews]

If you use the hx-push-url="true" tag on the input the input name + value will be added as a parameter to the request. If all you want is the parameter to be included without it being added to the URL, that should happen automatically for inputs and get requests.

<input name="key" type="text" hx-get="/action" hx-trigger="keyup" />

[nickleman]

I was hoping to do it with an element other than an input. Essentially, an invisible text entry. so was looking at a < div > tag with a a trigger that also included from:body. Is this doable at this time with HTMX? at a minimum, I would settle for taking the input from body and insert the keyup into an input field if necessary.

Thanks again.

[jreviews]

Can you provide a bit more information on the usage case for this and if you have some example code for what you are trying to achieve?

[nickleman]

So, my wife and daughter asked me to make a wordle equivalent for a 6 year old. I have completed it, but am now trying to make it nicer and easier to use. I did mine server side using python and fastapi. There is an input form and I would like to get rid of that if I could. right now I have the input form replace the last line of blanks with letters as they are typed into the form, but would like to get rid of the form altogether since there is only one input anyway. So if I could put an htmx trigger on the div tag of that last line and get the character that triggered it, I could do that. It's sort of like doing hot keys, but I don't want to create a trigger and server side function for each character... :)

Thanks again.

[jreviews]

Does this work?

    <div hx-get="/action" hx-trigger="keyup" hx-vals='js:{key: event.key}'">
        <input name="someinput" type="text" />
    </div>

[nickleman]

I'll have to let you know. I'm at work right now. I'll try it this evening and get back to you. Thanks!

[nickleman]

Yes, that appears to be working. Is this documented somewhere that I missed?

Thanks!

[jreviews]

That's great. Yes, it's mentioned here https://htmx.org/attributes/hx-vals/ that you can use javascript to retrieve a value, but there's no mention that you have access to the event. I just assumed.