Please report issues and feel free to make feature suggestions as well.
MIT License
A mobile and touch friendly input spinner component for Bootstrap.
License: Other
Please report issues and feel free to make feature suggestions as well.
MIT License
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">
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
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.
Would be nice if people could install it with npm as well.
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.
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
The buttons' icon has roughly 1 pixel difference. (Checked in Chrome 49, IE11 and FF43)
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
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'
});
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.
The plugin needs to handle when initialized on an input-group.
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,
});
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.
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 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()) {...}
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.
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?
not write any character other than numerical
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!
Hey man, please submit your javascript to the CDN, jsdelivr http://www.jsdelivr.com/ , because i want to grab it from there.
Regards.
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
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.
I think that will be very helpful if you include some kind of getters, to retrieve values on settings in a easy way. :)
When the original input is empty, then TouchSpin's init value would be empty as well.
The _advanceInputGroup function ignores the settings.verticalbuttons and therefore doesn't render as expected.
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.
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
When using touchspin in a form-group-sm it doesn't size up well.
Hello great plugin if you implement change values via mousewheel will be awesome
Hence the empty prefix span before the input the standard bootstrap rule doesn't apply.
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
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;
}
}
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..
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
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.
Need a method to update any setting of an already initialized instance.
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?
Should be changed to:
if (val !== returnval.toString())
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.
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!
I want disable touchspin on the start. After I checked my checkbox, touchspin is enabled.
How I can disable touchspin.
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.
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.
There are options for verticalupclass and verticaldownclass, but nothing similar for adjusting regular left and right buttons?
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.
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.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.