Catching TextInput value while the user is typing

Panel
1

I have a text input and a button, and I want to enable the button when the user types at least 3 letters.

import panel as pn
pn.extension()

txt = pn.widgets.TextInput(name='type here')
button = pn.widgets.Button(name='Submit', disabled=True)

But the change event tigers only on Enter key or focus lost.

I have tried to use add_periodic_callback to no avail:

def update():
    txt.param.trigger('value')
    print(txt.value)
    button.disabled =  len(txt.value) <= 3
        

def periodically_set_distabled():
    pn.state.add_periodic_callback(update, period=500)
periodically_set_distabled()

How can I trigger python function on input change event (meaning keydown, keyup, keypress, etc)?

Thank you very much

2 Likes
2

Hi @ItamarShDev

The Panel TextInput does not currently support this. But looking at the underlying Bokeh TextInput widget I can see that it actually supports it.

So you can do like below.

import panel as pn
import param
pn.extension()

class CustomTextInput(pn.widgets.TextInput):
    value_input = param.String(doc="""
    Initial or current value.

    Change events are triggered whenever any update happens, i.e. on every
    keypress.
    """)

txt = CustomTextInput(name='type here')
button = pn.widgets.Button(name='Submit', disabled=True)

@pn.depends(txt.param.value_input, watch=True)
def _update_button(value):
    button.disabled =  len(value) <= 3

pn.Column(
    txt, button
).servable()

textinput_value_input

1 Like
3

I’ve added a Feature Request here https://github.com/holoviz/panel/issues/1882

2 Likes
4

Thank you ver much @Marc !

I need to find some time to learn the underlying system, so I could submit MR myself :slight_smile:

3 Likes
5

Thank you very much @Marc !!
(and @ItamarShDev for raising it up) .

1 Like