This time I will share jQuery Plugin and tutorial about Touch-friendly Input Spinner With Custom Controls – inputArrow, hope it will help you in programming stack.
The inputArrow jQuery plugin converts the normal text field into a highly customizable, mobile-friendly input spinner with custom increment and decrement buttons.
More features:
- Min/max values.
- Step size.
- Callback functions.
- Prefix and suffix.
- Touch-enabled.
- Continuously increase/decrease values as the buttons are pressed.
How to use it:
1. Download and place the JavaScript file jquery.inputarrow.js
after loading jQuery library.
1 |
< script src = "/path/to/cdn/jquery.slim.min.js" ></ script > |
2 |
< script src = "jquery.inputarrow.js" ></ script > |
2. Just call the plugin on the text input field and done.
1 |
< input type = "text" name = "" value = "0" class = "inputarrow" id = "example" > |
1 |
$( '#example' ).inputarrow(); |
3. Customize the increment and decrement buttons.
1 |
$( '#example' ).inputarrow({ |
2 |
renderPrev: function (input) { |
3 |
return $( '<span class="custom-prev">Prev</span>' ).insertBefore(input); |
5 |
renderNext: function (input) { |
6 |
return $( '<span class="custom-next">Next</span>' ).insertAfter(input); |
8 |
disabledClassName: 'custom-disabled' |
4. Append custom text to the end of the numeric value.
01 |
$( '#example' ).inputarrow({ |
02 |
encodeValue: function (value) { |
03 |
if (value === 'no bananas' ) { |
06 |
return value.replace(/^(.*?)sbananas?$/, '$1' ); |
08 |
decodeValue: function (value) { |
12 |
var unit = (value === 1) ? 'banana' : 'bananas' ; |
13 |
return value + ' ' + unit; |
15 |
onChange: function (newValue, oldValue) { |
16 |
console.info( 'change from' , oldValue, 'to' , newValue); |
18 |
onIterate: function (newValue, oldValue) { |
19 |
console.info( 'iterate from' , oldValue, 'to' , newValue); |
5. Customize the min & max values.
1 |
$( '#example' ).inputarrow({ |
6. Customize the step size. Default: 1.
1 |
$( '#example' ).inputarrow({ |
7. More customization options and callback functions.
01 |
$( '#example' ).inputarrow({ |
Changelog:
2021-01-24
- fix double counter touch on mobile