Pyscript color input - triggers to soon

Question

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 ?

I.e. this doesn't fire on close or interactively. <input type="color" id="main-color" name="head" value="#15347d" py-click="generate_color_schemes(False)"> — Neon22
– Neon22, Commented Jun 1, 2023 at 12:23

Jeff Glass · Accepted Answer · 2023-06-02 13:48:36Z

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>

cclauss · Accepted Answer · 2024-03-05 06:26:16Z

0

You could also prompt() the user for input()...

import contextlib

with contextlib.suppress(ImportError):
    from pyscript import window
    input = window.prompt

main_color = input('Please enter the main color.')

answered Mar 5, 2024 at 6:26

cclauss

77911 silver badges19 bronze badges

Collectives™ on Stack Overflow

Pyscript color input - triggers to soon

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related