Limit Keystrokes

Is anyone aware or any way within Wappler without manual .js to only allow certain keystrokes on an input field. I have not seen one but maybe it is hiding.
I want to land up with a number field input on a form that will only allow the Up or Down arrows on the keyboard to work and no other input at all?

Sounds like a few lines of custom Javascript needed.
As a start i would try

capture the onkeypress() event
check for up/ down arrow (codes 38 and 40)
manually increment/decrement the form.element.value according to the keypress
return false to stop the keypress being entered into the form

Then again I am certainly not the javascript expert on this forum!

1 Like

Thanks @Hyperbytes, basically what i thought, I had already done it with some .js to get it working but was just wondering if I was adding in .js for nothing when there might have already been a Wappler implementation i was not aware of. This is what I used and have been using for the last 3 years or so.

<input name="order_set_quantity" type="number" class="form-control" onkeypress="if(event.keyCode!=38 &amp;&amp; event.keyCode!=40) {alert('Please use the clickable UP or DOWN arrows to the right of this number field, or the UP and DOWN arrows on your keyboard to alter these values.'); return false;}" onkeydown="if(event.keyCode!=38 &amp;&amp; event.keyCode!=40) {alert('Please use the clickable UP or DOWN arrows to the right of this number field, or the UP and DOWN arrows on your keyboard to alter these values.'); return false;}" dmx-bind:value="pr_packaging" dmx-bind:min="pr_packaging" dmx-bind:step="pr_packaging" required="">

@psweb Nice Solution!, mine would have been far more long winded

Wow, somebody would have done something more long winded than me, iā€™m flabbergasted. :slight_smile:

You only need the onkeydown, if prevented the keypressed is never fired. Also you would also want to allow the TAB (keycode 9) and maybe ENTER (keycode 13) for accessibility.

1 Like

Thanks so much @patrick, awesome to have feedback on something that is not even Wappler code, really, really appreciate it.