html htmx -焦点元素(非JavaScript)

nbnkbykc  于 2023-10-14  发布在  Java
关注(0)|答案(1)|浏览(120)

在htmx中元素是如何聚焦的?
我似乎找不到任何答案。
目标是在POST请求后聚焦特定元素,即使用id #field-description聚焦输入。
如果可能的话,我希望这是在没有JavaScript的情况下完成的。

<div class="input-group">
    <span>Description</span>
    <input type="text" name="description" placeholder="task" id="field-description">
</div>

<div class="input-group">
    <span>Amount</span>
    <input type="number" name="amount" placeholder="number" id="field-amount">
</div>

<button 
    hx-post="/api/todos" 
    hx-include="#field-description, #field-amount"
    hx-target="#todos-container" 
    hx-swap="innerHTML"
    hx-focus="#field-description"
>
    Add
</button>

<div id="todos-container" class="todos-container">
    ${getTodos()}
</div>
7rtdyuoh

7rtdyuoh1#

我不认为htmx有任何hx属性的行为。您可以尝试hx-on属性,它接受内联JavaScript表达式。点击【添加】按钮,您可以添加:

hx-on::after-settle="document.getElementById('field-description').focus()"

但对于这样一个简单的案例来说,这是相当多的工作。我建议您在需要初始关注的输入上添加一个autofocus属性。

<input type="text" name="description" .... autofocus>

相关问题