Pyscript 颜色输入 - 即将触发

Pyscript color input - triggers to soon

提问人:Neon22 提问时间:6/1/2023 更新时间:6/2/2023 访问量:65

问:

我正在使用这个html让用户选择一种颜色:

<input type="color" id="main-color" name="head" value="#15347d"">

然后我使用一个按钮来调用我的 python 函数

button py-click="generate_color_schemes(False)" id="button-submit">Update!</button>

效果很好。(检查以获取十六进制颜色。generate_color_schemes()Element("main-color").value

但我想将两者结合起来,所以单击输入 - 打开一个选择器并在用户单击颜色选择器内以及离开时触发 python 函数。

但是(正如预期的那样)添加会在第一次单击输入时触发我的函数,而不是在颜色选择器弹出窗口关闭时或用户在颜色选择器内单击时触发我的函数。py-click

我想我希望pyclick在事件和事件上触发。oninputonchange

有没有办法将 with 结合起来以获得这种行为?input type='color'py-click

颜色选择器 pyscript

评论

0赞 Neon22 6/1/2023
也就是说,这不会近距离或交互式地触发。<input type="color" id="main-color" name="head" value="#15347d" py-click="generate_color_schemes(False)">

答:

1赞 Jeff Glass 6/2/2023 #1

正如你所说,你有正确的语法,但有错误的事件。您可以侦听输入事件(每次输入值更改时调度)或更改事件(在本例中,在颜色选取器关闭时调度),而不是侦听事件。要在PyScript中执行此操作(或侦听任何事件),HTML属性是事件的类型。在本例中,您将使用 和 属性。clickpy-[event][event]py-inputpy-change

这是当前版本的 PyScript (2023.03.1) 中的一个工作示例,我提到它以防将来事件 API 发生变化。MDN 文档在 JavaScript 中有一个更长的示例

<!-- Written for PyScript 2023.03.1 -->
<input type="color" id="main-color" py-input="do_something_with_color()" py-change="do_something_else()">

<py-script>
    import js
    def do_something_with_color():
        elem = js.document.getElementById("main-color")
        value = elem.value
        print(f'Chosen color: {value}') # do something here

    def do_something_else():
        elem = js.document.getElementById("main-color")
        value = elem.value
        print(f'The final color chosen was: {value}') # do something here
</py-script>