英文:
Pyscript color input - triggers to soon
问题
我正在使用这个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会在首次单击输入框时触发我的函数，而不是在颜色选择器弹出关闭或用户在颜色选择器内单击时触发。
我认为我希望py-click在oninput事件以及onchange事件上触发。有办法将input type='color'与py-click结合以实现这种行为吗？
英文:
I'm using this html to have the user choose a color:
<input type="color" id="main-color" name="head" value="#15347d"">
Then I'm using a button to call my python function
button py-click="generate_color_schemes(False)" id="button-submit">Update!</button>
Works well. (generate_color_schemes() examines the Element("main-color").value to get the hex color.)
But I'd like to combine the two, so clicking on the input - opens a picker and fires the python function as the user clicks inside the color picker as well as when they leave.
But (as expected) adding py-click fires my function when the input is first clicked and not when the color chooser popup closes or as the user clicks inside the color picker.
I think I want pyclick to be triggering on the oninput event as well as the onchange event.
Is there a way to combine the input type='color' with py-click to get this behaviour ?
答案1
得分: 1
正如你所说，你有正确的语法，但错误的事件。与其监听click事件，你可以监听input事件（每当输入值更改时都会触发）或change事件（在此情况下，当颜色选择器关闭时触发）。要在PyScript中执行此操作（或监听任何事件），HTML属性是py-[event]，其中[event]是事件的类型。在这种情况下，你将使用py-input和py-change属性。
以下是在当前版本的PyScript（2023.03.1）中的一个可用示例，我提到这一点是因为未来可能会更改事件API。MDN文档中有一个更长的示例，是用JavaScript编写的。
<!-- 适用于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'选择的颜色: {value}') # 在这里执行一些操作
def do_something_else():
elem = js.document.getElementById("main-color")
value = elem.value
print(f'最终选择的颜色是: {value}') # 在这里执行一些操作
</py-script>
英文:
As you say, you've got the right syntax but the wrong event(s). Rather than listening for the click event, you can listen to the input event (which is dispatched every time the value of an input changes) or the change event (which is dispatched, in this case, when the color picker closes). To do this in PyScript (or to listen to any event), the HTML attribute is py-[event] where [event] is the type of the event. In this case, you'll use the py-input and py-change attributes.
Here's a working example in the current release of PyScript (2023.03.1), which I mention in case the events API changes in the future. The MDN docs have a longer example in 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>
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论