A simpler and self-contained number picker?

Question

In searching for number picker javascript code for a PhoneGap app I'm making, I came across this: https://plugins.jquery.com/dpNumberPicker/

It does what I need very well but looks overly complicated. I've searched out lots of code and this one does what I need the best. I'm wondering if there's a much simpler way to achieve a cross-platform (Android and iOS) mobile-ready (tappable) number picker? I need something that lets me make a stylable button with a - sign, stylable box where the number appears, and a following stylable + sign, and both buttons can be styled independently or both share the same style code, as well as the + and - being stylable as well.

In short, this: [-][ 0 ][+]

Is there anything simpler (as in far less lines of code) that does what the DP Number Picker does the way it does it? This number picker is handsome code but it came out in 2014. I was hoping there was a neater and shorter way to achieve this.

If there's an answer to this, is there a way to make the buttons only appear and the number box be stylable when you tap on the number input box, and then the buttons disappear and number box goes back to its default untapped style after a pre-defined number of seconds of not tapping?

Going from this: 0 To this: [-][ 0 ][+] And back again after you stop tapping: 5

Answer 1

Ok, to answer your questions (as you commented that you only wanted to know if there was any point in trying to code this yourself):

Is there anything simpler (as in far less lines of code) that does what the DP Number Picker does the way it does it? This number picker is handsome code but it came out in 2014. I was hoping there was a neater and shorter way to achieve this.

Unless you can use <input type="number"> , you could code a custom solution yourself. A custom coded solution is almost always likely to be shorter than a general solution made by others, since you only code the functionality you specifically need. What you are asking should not be too hard to code, and probably a good exercise when learning JavaScript.

If there's an answer to this, is there a way to make the buttons only appear and the number box be stylable when you tap on the number input box, and then the buttons disappear and number box goes back to its default untapped style after a pre-defined number of seconds of not tapping?

Yes, you can make appearence and styling change as a result of user interaction by using event listeners on the input box and the buttons. You could also make the appearance change back to default after a set time of inactivity by debouncing .