如何在 HTMX 提示中设置默认值？

问题描述 投票：0回答：1

我想知道如何在打开window.prompt窗口时设置默认值。

<a href="#" hx-prompt="Type your age" hx-get="/set/age">My Age: ?</a>

window.prompt 为空白。如何设置像

20
这样的预定义年龄？

javascript ajax htmx
1个回答
0
投票

HTMX 不允许您这样做，但这里有一个扩展，引入了自定义属性 

hx-ask
和（可选）
hx-ask-default
:

htmx.defineExtension('ask', {
    onEvent: function(name, event) {
        if (name !== 'htmx:configRequest')
            return;        

        const elt = event.detail.elt;
        const askElt = elt.closest('[hx-ask]') || elt.closest('[data-hx-ask]');
        
        if (askElt) {
            const question = askElt.getAttribute('hx-ask') || askElt.getAttribute('data-hx-ask');
            const suggestion = askElt.getAttribute('hx-ask-default') || askElt.getAttribute('data-hx-ask-default');

            event.detail.headers['HX-Prompt'] = prompt(question, suggestion || undefined);
        }
    }
});

这样称呼：

<body hx-ext="ask">
    <a href="#" hx-ask="Type your age" hx-ask-default="69" hx-get="/set/age">My Age: ?</a>
</body>

如您所见，它发送 

HX-Prompt
标头，就像 
hx-prompt
属性一样。如果您同时使用 
hx-ask
和 
hx-prompt
，您将收到两个提示，但只会发送 
hx-ask
的结果，因为它会稍后运行。

看起来是一个足够好的功能，应该有人制作 PR 并将其添加到官方

hx-prompt
事物中。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.