xh-on keyup event filter

[8483]

This works:

<input 
        type="text" 
        name="description" 
        placeholder="task" 
        id="field-description"
        hx-on:keyup="alert('foo')"
    >

It would be great if we can specify the event...

<input 
        type="text" 
        name="description" 
        placeholder="task" 
        id="field-description"
        hx-on:keyup[key=='Enter']="alert('foo')"
    >

Without writing javascript handlers.

<input 
        type="text" 
        name="description" 
        placeholder="task" 
        id="field-description"
        hx-on:keyup="enterKeypressHandler(event);"
    >

<script>
    function enterKeypressHandler(event) {
        if (event.key !== "Enter") return;
        
        alert("foo");
    }
</script>

[dz4k]

why not just do this?

<input 
        type="text" 
        name="description" 
        placeholder="task" 
        id="field-description"
        hx-on:keyup="if (key=='Enter') alert('foo')"
    >

[8483]

@dz4k Whoa, why didn't I think of that... Thank you for pointing it out, I made it work like this:

<input 
    type="text" 
    name="description" 
    placeholder="task" 
    id="field-description"
    hx-on:keyup="if (event.key=='Enter') focusElement('field-amount');"
>

<script>
    function focusElement(elementId) {
        document.getElementById(elementId).focus();
    }
</script>