istvan-ujjmeszaros / bootstrap-touchspin

A mobile and touch friendly input spinner component for Bootstrap.

Bootstrap TouchSpin

Bootstrap TouchSpin is a mobile and touch friendly input spinner component for Bootstrap 3 & 4.

• Website

Please report issues and feel free to make feature suggestions as well.

License

MIT License

bootstrap-touchspin's Issues

Can't init with empty value

When the original input is empty, then TouchSpin's init value would be empty as well.

Improperly handles placement and formatting on input-group with existing input-group-addon

When attempting to add spinner features to an input-group that has an input-group-addon, on off multiple bad things happen depending upon the passed in settings. If verticalbuttons are set, input-group with an existing add-on get regular horizontal buttons. Regular horizontal button CSS also incorrectly rounds the wrong corners and doesn't properly adjust the margins.

Update settings after initialization

Need a method to update any setting of an already initialized instance.

Use mousewheel

Hello great plugin if you implement change values via mousewheel will be awesome

IE9 resizes some input on hovering +- buttons

Swipe gesture activates Incremement/Decrement buttons and prevents scroll

When using a touch interface, if I make a swipe gesture to scroll the page and the gesture begins on an increment or decrement button, instead of scrolling the page the button will activate and the value will change.

This is inconsistent with standard webpage controls, where swipe gestures that begin on Inputs, checkboxes, buttons etc don't activate those controls and would all correctly scroll the page.

For reference I am using an Android Tablet (4.4.2) and an Android Phone (4.3) both running Chrome 35.

The input's left border is not rounded even when nothing is preceding

Hence the empty prefix span before the input the standard bootstrap rule doesn't apply.

max and min deactivate MAX

Hi, I have the max and min feature working, however I am using several spinners on a page and it is their combined total that determines if a maximum has been found.

I have used the UP and DOWN events to capture the current total in a variable and I can check to see if this has hit a maximum.

My issue is how can I deactivate all the spinners from adding more to the total.

Basically is there an event to disable the (+) button so the user can still lower the range and this re-activates the (+) button again

thanks

radius of input field not correct + strange borders between buttons

If you take a simple spinner like this:

<input id="demo_vertical" type="text" value="" name="demo_vertical">
<script>
    $("input[name='demo_vertical']").TouchSpin({
      verticalbuttons: true
    });
</script>

The borders of the input field on the left side are not rounded as expected. This is because you introduce some elements in the input-group and the bootstrap input-group is then messed up (my guess).

This is the element I get from your code:

<div class="input-group bootstrap-touchspin"><span class="input-group-addon bootstrap-touchspin-prefix" style="display: none;"></span><input id="no-of-people-input" type="text" value="2" class="form-control" style="display: block;"><span class="input-group-addon bootstrap-touchspin-postfix" style="display: none;"></span><span class="input-group-btn-vertical"><button class="btn btn-default bootstrap-touchspin-up" type="button"><i class="glyphicon glyphicon-chevron-up"></i></button><button class="btn btn-default bootstrap-touchspin-down" type="button"><i class="glyphicon glyphicon-chevron-down"></i></button></span></div>

And something like this works as expected (rounded borders):

<div class="input-group bootstrap-touchspin">
    <input id="no-of-people-input" type="text" value="2" class="form-control input" style="display: block;">    
        <div class="input-group-btn-vertical">
        <button class="btn btn-default bootstrap-touchspin-up" type="button"><i class="glyphicon glyphicon-chevron-up"></i></button>
        <button class="btn btn-default bootstrap-touchspin-down" type="button"><i class="glyphicon glyphicon-chevron-down"></i></button>   
        </div>
</div>

In the demo at http://www.virtuosoft.eu/code/bootstrap-touchspin/ I also see some weird borders, for example at "Init with empty value" the vertical bar on the left of the minus is not the same as the one on the right of the plus. If you try to zoom in you clearly see that the buttons and the input field are not aligned. I think the issue is similar.

New initialize possibility

What if we add possibility to use input "data-" attributes as default plugin functionality?
For example:
<input type="text" name="test" data-min="20" value="50">
Or:
<input type="text" name="test" data-min="50" data-max="1000" data-step="50" data-initval="50" value="0">

Bug

https://github.com/istvan-ujjmeszaros/bootstrap-touchspin/blob/master/src/jquery.bootstrap-touchspin.js#L554

Should be changed to:

if (val !== returnval.toString())

number format

Great plugin!
Is it possible to format the numbers, adding commas / periods / spaces to make it easier to read? With large numbers it can be hard to tell.

No option to change look of standard + and - buttons.

There are options for verticalupclass and verticaldownclass, but nothing similar for adjusting regular left and right buttons?

Can not use multiple buttons in postfix or prefix

The plugin needs to handle when initialized on an input-group.

Getters

I think that will be very helpful if you include some kind of getters, to retrieve values on settings in a easy way. :)

"touchspin.updatesettings" doesn't update mousewheel settings

I don't see the mousewheel settings changed when using "touchSpin.trigger('touchspin.updatesettings', {mousewheel: true|false});". I can see that it is set once during initialization and cannot be changed via the updatesettings method.

Suggest create a new function to attach/detach mousewheel event. Example:
function _updateMouseWheelSettings() {
if (settings.mousewheel) {
originalinput.on('mousewheel DOMMouseScroll', function(ev) {
var delta = ev.originalEvent.wheelDelta || -ev.originalEvent.detail;

            ev.stopPropagation();
            ev.preventDefault();

            if (delta < 0) {
               downOnce();
            }
            else {
               upOnce();
            }
         });
      } else {
         originalinput.off('mousewheel DOMMouseScroll');
      }
   }

Update changeSettings function to call the new function:
function changeSettings(newsettings) {
_updateSettings(newsettings);
_updateMouseWheelSettings();
_checkValue();
...
}

Can this be done?

Thanks a lot.

"value" overridden by "min"

I'm setting my value as 0 but it is being overridden by my min setting of 5. Is there a way to show initial setting of 0, then first step starts out with min of 5? Right now the initial value shows 5.

touchspin hangs on ipad (Safari 8.3)

Hi,

I'm having problems identifying a problem on IPAD. I have a web page displaying multiple products and each product has a bootstrap dropdown + a touchspin spinner. When I toggle the dropdown AND interact with the page (scroll, toggle a dropdown etc) Safari stops responding. Since I do not have IOS environment I cannot debug the issue. I see the problem only on IPAD. I'd appreciate if you can give me some inputs to resolve the issue.

Thanks

decimal divider "," for locale (IT)

is it possible to accept "," for decimal divider instead of "." ?
For Italy, divisor is ","
Because if i insert "34,12", on focus out it replace with "34.00"

Thanks

Consider allowing user to read plugin options

Please consider allowing the user to input/update/read the plugin options on the fly. I was able to create a separate input field that would update the step setting like so:

<input id="timestep" type="text" class="form-control" value="600">
...
$("#timestep").change(function()
{
    $("input").trigger("touchspin.updatesettings", {step: $("#timestep").val()});
});

I however found no way to show the boosted step value to the user. I tried to update the "timestep" input value but I could not read the step setting from the plugin itself:

$("input").trigger("touchspin.change");
{
    var step = $("#timestamp").TouchSpin().data("settings", "step");
    $("#timestep").val(step);
}

Is there perhaps a way to read the values of all the settings from plugin? Something like:

$("#timestamp").TouchSpin().step();

Thank you

Disable Touchspin

I want disable touchspin on the start. After I checked my checkbox, touchspin is enabled.
How I can disable touchspin.

Touchspin doesn't recognize form-group-sm

When using touchspin in a form-group-sm it doesn't size up well.

Consider to focus input when user touches buttons - or +

This will be valueable when you need to validate the input with jquery validation. When I have the input with validation rules, and I get an error the error doesn't go away when I click + or - buttons, however when I click the input to put the focus on it and when move to the next field in the form the error goes away.

So, my recommendation is to focus the input always when the user clicks - or +. If you do that it will be compatible with jquey validation plugin.

Thanks in advance

Option to exclude buttons from tabbing

It would be nice to have an option to exclude the up & down button from tabbing so users who are filling forms manually can speed up when tabbing from field to field.

This of course can be done by adding the attribute tabindex="-1" to the button element.

How to validate the value

I am using bootstrap validation plugin (https://github.com/formvalidation/formvalidation.io) How to validate the value of touchspin field?

Like the input value must be > 0.
Can you give me an idea?

bug in your _getBoostedStep()

hi, i believe this must be a bug in your _getBoostedStep() function.
wrong results with spinning up: 23, 43, 73, 93, 113 ...
correct results would be: 23, 46, 69, 92, 115 ...
The are uncorrect values with spinning down too.

<script> $("input[name='demo1']").TouchSpin({ min: 23, max: 10000, step: 23, decimals: 0, boostat: 5, maxboostedstep: 10, postfix: '$' }); </script>

conclusion after the spinner

Hi!

How to make a conclusion after the spinner value multiplied by the number?

For example, the number of items multiplied by their value:

• 1 + $ 100
• 2 + $ 200
• 10 + $ 1000

Force value to be divisible by step value

Problem with mouseover

When the mouse is over the "up" button, touchspin increases continuously value.

After click the button, the event is continuously being triggered when the mouse stays over the button.
And that just stop when I leave the mouse off the button.

The same problem occurs with the "down" button.

Here is the code:

$('.touchspin').TouchSpin({
    buttondown_class: 'btn btn-default btn-sm',
    buttonup_class: 'btn btn-default btn-sm',
    min: 1,
    max: 100,
    step: 1,
    initval: 1,
    decimals: 0,
});

Scroll page discomfort..

How I can disable scrolling inputs values when input doesn't have focus? I just scroll page, and when cursor is above input (which is not focused) it starts change input values..

Wrong value check while typing

It is impossible to type in larger numbers when the minimum value is larger than 0, because the input gets the minimum value after typing in the first character.

restrict alpha chars

hey there,

it would make sense if user unable to use alpha chars in a decimal spinner field. but right now I can use a-zA-Z when I manually set on the input.

Need setting for button class

Submit to jsdelivr

Hey man, please submit your javascript to the CDN, jsdelivr http://www.jsdelivr.com/ , because i want to grab it from there.

Regards.

Setting forcestepdivisibility and decimals causes change event to be triggered every time

I found out that the change event gets triggered every time I try to navigate out of the input even though the value doesn't change when I have forcestepdivisibility to anything that is 'none' and decimals set to anything that is not 0.

My sample code:

My Analysis:
At this line, "returnval = _forcestepdivisibility(returnval);" in _checkValue method, returnval is converted into decimals if forcestepdivisibility is not set to 'none'. Then the comparison following that line would check the number val (non-decimal) with decimal returnval. This comparison will always return true even though the input never changed causing val gets set and change gets triggered.

I assume we don't want to convert val to number during the comparison. Suggest change to:
if (val !== returnval.toString()) {...} instead of
if (Number(val).toString() !== returnval.toString()) {...}

Register on npmjs.org

Would be nice if people could install it with npm as well.

touchspin.on.stopSpin doesn't fire using mousewheel

The events example here: http://www.virtuosoft.eu/code/bootstrap-touchspin/ shows how when you use the mouse wheel (or scroll touchpad on a macbook) to change the value, the events are not firing. The only events that fire are the min and max events.

I wrote a text in my local app that shows that change is properly being fired.

Problem w/ the current functionality is that, IFAIK, there's no way to use this w/ AJAX calls. If observing the change event, you'll generate multiple calls for each "step" and the on.stopSpin event doesn't fire at all, so I'm actually rather confused as to why it's called on.stopSpin in the first place.

multiple touchspin instances with one initialize?

would it be possible to initialize the touchspin once and have it being the same for every instance of the target element (e.g. by class)?

something like:

$("input.classname").TouchSpin({
    min: 1,
    max: 999,
    stepinterval: 50,
    maxboostedstep: 10000000
});

I tried around, but all attempts led to a broken touchspinner, so far.

tap / touch not properly working

the value should increment / decrement on a simple tap ('click' with the finger) to the '+' or '-' button.

setting stepintervaldelay = 0 helps a bit for better "tap" support, but still not working properly

actual (with version 1.2.1) the behavior of tap / touch depends also on the OS, the browser (and the value of stepintervaldelay):

on windows 8.1, firefox 24, stepintervaldelay=0: tap works
on windows 8.1, firefox 24, stepintervaldelay=0: touch not working
on windows 8.1, chrome 30, stepintervaldelay=0: tap not working
on windows 8.1, chrome 30, stepintervaldelay=0: touch working
iOS7, chrome 30, stepintervaldelay=0: tap not woking
iOS7, chrome 30, stepintervaldelay=0: touch is woking
iOS7, safari, stepintervaldelay=0: tap not woking
iOS7, safari, stepintervaldelay=0: touch woking
Android 4.1, firefox 24 stepintervaldelay=0: tap not woking, touch working
Android 4.1, chrome 30, stepintervaldelay=0: tap not woking, touch working

Vertical Button Icons Misaligned

The buttons' icon has roughly 1 pixel difference. (Checked in Chrome 49, IE11 and FF43)

Need support for different input sizes

Setting non-zero min val causes problems with step

Hi,

there is a small problem with setting non-zero min value when rounding is allowed.

Function _forcestepdivisibility should look like

  function _forcestepdivisibility(value) {
          switch (settings.forcestepdivisibility) {
              case 'round':
                  return (Math.round((value - settings.min) / settings.step) * settings.step + settings.min).toFixed(settings.decimals);
              case 'floor':
                  return (Math.floor((value - settings.min) / settings.step) * settings.step + settings.min).toFixed(settings.decimals);
              case 'ceil':
                  return (Math.ceil((value - settings.min) / settings.step) * settings.step + settings.min).toFixed(settings.decimals);
              default:
                  return value;
          }
      }

Vertical Buttons not supported when input is inside a 'input-group'

The _advanceInputGroup function ignores the settings.verticalbuttons and therefore doesn't render as expected.

A situation in which the max can be exceeded and a possible fix for it

I seem to have found a situation in which it is possible to exceed the specified max value by manually typing a value great than the maximum and then pressing the Enter key. I was unable to duplicate this behavior in the first example TouchSpin control on the demo page (which has a max of 100). However, the TouchSpin control on my page is doing something a bit different in that it captures change events on the TouchSpin input field and automatically updates the val of the input field of an ionRangeSlider control (which is supposed to stay in sync with the TouchSpin control). The ionRangeSlider control is similarly capturing onChange events and automatically updating the the val of the input field of the TouchSpin control. I think that's how it is bypassing the call to _checkValue() which would normally catch this situations and set the value to max.



I found a way to prevent this from happening by making one small change to the code of TouchSpin 3.0.1. At line 302 of bootstrap.touchspin.js I changed the event upon which _checkValue() is being called from 'blur' to 'change'. 



So the code went from this:



originalinput.on('blur', function() {
 
_checkValue();

});



To this:



originalinput.on('change', function() {

 _checkValue();

});

Of course, the downside is that this will result in _checkValue() getting called a lot more.  However, it doesn't noticeably affect the responsiveness of the TouchSpin control for me on my laptop. 

I submit this small change for consideration as a patch to TouchSpin 3.0.1.

Thanks for all your great work on TouchSpin!

Allow only numeric characters

not write any character other than numerical

Request for main to be added to bower

Would it be possible to add the main file into the bower file? I'm using wiredep to inject sources and it's not injecting bootstrap-touchspin because you don't have a 'main' key in the bower file (this would normally point to the dist js file). Thanks!

negative value

When i have a negative value like value="-1" with min: -1, always appears 0.

For example:

displays 0.

and i have this:
$("#time").TouchSpin({
min: -1,
max: 360000,
step: 10,
decimals: 0,
boostat: 5,
maxboostedstep: 10,
postfix: 'seconds'
});

0 is not prepended to the field when adding decimals consisting of a dot and 2 decimal places.

0 is not prepended to a field when adding decimals consisting of a dot and 2 decimal places.

if I type .99 in a filed a 0 should be prepended to the front, 0.99, to make the behaviour of the component consistent. this does not happen.

cheers

I can add decimal places to a field that should not have decimal places

I have configured a field to be an int and not have decimal places and yet i am able to add decimals.

if I add 1.99 to the field this value is appropriately rounded up to 2. however if i add 0.00 to the field the value is not parsed and remains 0.00.

TouchSpin('destroy') does not work.

I'm using TouchSpin in a fluid interface where fields are added and deleted programmatic. Part of these fields includes TouchSpin controls. Included in the field creation process is the resetting of all TouchSpin controls by removing and initializing them with "destroy" first.

It seems the "destroy" option does not work and was hoping if you had any advise on how to remove the TouchSpin controls from a input?