Create +/- sign for input on mobile device

API & Custom Code Ask Developers
1

I'm trying to make the forms on my app more mobile-friendly. For example adding a +/- sign to a form that records quantity.

Was wondering if there was something in the knowledge base that covers that ?

e.g. I want to achieve something like below

I found this website that is related to it, but frankly I'm not very good with javascript or css

https://css-tricks.com/number-increment-buttons/

Anyone have an idea how to do this? I think it would be quite useful.

2

Hi Brad,

Thanks a lot for your help! It's a start.. I'll give it a go and see how far I can get to where I'm trying to go.

Thanks again for your help :D

3

Not exactly the same but changing the input type in Javascript to number will do this:

$(document).on('knack-view-render.any', function (event, view, data) {
 $("#field_XXX").prop({type:"number"});
});

Has the benefit of displaying numbered keypads on mobile browsers, but it doesn't respond to +/- keystrokes without further code.

Change XXX to your field name, and read more here https://www.w3schools.com/tags/att_input_type_number.asp.