Context

A number input has an empty value and then that input has some of its attributes changed.

Current Behavior

The plugin resets the value to zero

Expected Behavior

The value should remain empty.

Example

https://jsfiddle.net/maurojs10/er4qkxwo

How to reproduce:

1. Change system region format to Russian.
2. Click on input spinner to input value by typing
3. Type any number

You should see an error:
bootstrap-input-spinner.js:256 Uncaught SyntaxError: Invalid regular expression: /\/: \ at end of pattern at new RegExp (<anonymous>) at parseLocaleNumber (bootstrap-input-spinner.js:256) at HTMLInputElement.<anonymous> (bootstrap-input-spinner.js:113)

Reasoning
On Russian locale, there's no separator for thousands. Hence, this line
var thousandSeparator = numberFormat.format(1111).replace(/1/g, '')
produces an empty string. Then the next line
new RegExp('\\' + thousandSeparator, 'g'), '')
makes a regexp /\/, which makes an error and doesn't change the input spinner val.

<input id="test" type="number" step="1" />

And two button btn1 btn2 . btn.onClick=test1() and btn2.onClick=test2()

function test1() {
        $("#diskNum").attr("min", 11)
        $("#diskNum").attr("max", 1000)
        $("#diskNum").val(45)
    }

function test2() {
    $("#diskNum").attr("min", 1)
    $("#diskNum").attr("max", 10)
    $("#diskNum").val(5)
}



click btn1， it shows 45. Click btn2 , it shows 10. And click btn2 again, it shows 5.
Why?
It can't change min/max/val at the same time?

Hey,
great lib! Would it be possible for you guys to add support for prefix and suffix?

Something like that: https://stackoverflow.com/questions/49796934/add-a-text-suffix-to-input-type-number?noredirect=1&lq=1

From Octoprint.org

I made it simply with a span rendering over the input element.

<div>
<span style="position: absolute; margin-left: 15px; margin-top: 7px; z-index: 1;"> °C </span>

<input type="number" id="Temp" data-decimals="2" value="100"min="0" max="200" step="1" />                                            
</div> 

Regards

The plugin is not detecting disabled option of the parent input control.
Will be good to have such possibility and also possibility to enable/disable it programmatically.

[Intervention] Ignored attempt to cancel a touchstart event with cancelable=false, for example because scrolling is in progress and cannot be interrupted.

For a quick test, simply set data-step="2", set the value to 5, and try to decrement : expected 3, got 2. You can also do this test in your live demo in your "Dynamically handling of min, max, step and data-decimals" section (sidenote : would be nice if there was ids to your page sections, so we could link them directly in links!).

Same goes with increment, incrementing an odd number by an even number does not give the expected result (with the last example, I would expect 5 + 2 = 7, but 8 is currently being produced).

I realized that by doing some tests on my own fork, and tracing back I found that you changed to a rounding logic in this commit : be6b7c8, and now I'm wondering what is that "better form handling".

A fix for this would be to change this line :

to :

setValue(value + step)

... but I figure there was an issue to doing simply that, as this is what you had previously... so here's an issue to discuss about it :)

Hello:

Error on IE:

SCRIPT438: Object doesn't support property or method 'assign'
bootstrap-input-spinner.js (36,9)

Object.assign(config, options) - will be fixed?:) Thank u!

If the button is being held when the element is put into the disabled state, AutoInterval will cause it to keep counting up/down. Also, the onPointerUp is not always fired for the disabled element which can cause it to be stuck counting up/down indefinitely.

To Reproduce

On a page with the following HTML, click and hold on the plus button of the input spinner. Once it begins counting up, release the mouse button.

<input type="number">
<script>
	$('input[type=number]').on('change', function() {
		$(this).prop('disabled', true);
	}).inputSpinner();
</script>

Suggested Fix

In the updateAttributes function, add code that checks for the disabled state conditionally resets the autoIntervalHandler timer. For example,

var disabled = $original.prop("disabled")
$input.prop("disabled", disabled)
$buttonIncrement.prop("disabled", disabled)
$buttonDecrement.prop("disabled", disabled)
if (disabled) {
	resetTimer()
}

First, this library is very helpful, thank you!

At some point in my project I build a dynamic form after an AJAX call. The form is dynamically placed in a modal and launched. The spinner however won't initialize... The spinners which are in the page at pageload are working fine.

Any ideas?
Thanks

"A picture is worth a thousand words".

I am trying to show the issue with an animated gif here:

Here is a typical example of bootstrap-input-spinner rendered in a form and working in a dekstop computer. What i am trying to do, is to type the amount of "3,45" or "3.45" (if you prefer). As you can see by the keystrokes i haved demostrated, it's almost impossible. I made some tries and then finally i achieve to type in correctly.
I don't think the ideal solution is to use the buttons for all cases. Think if you have to type in the amount of ex. 645 or 4 589

But what about a regular user, not so much experienced ?

You can try yourself in example page of-course Demo example page

P.S. It doesn't seem the same issue from mobile.

My spinner will not stop on max amount. It goes 2 steps above every time if you just hold it down. Once you click back on it goes to max and then starts down if you pressing down. This happens to all the spinners I have on the page also.

$(document).ready(function() { $("input").keydown(function (e) { // Allow: backspace, delete, tab, escape and enter if ($.inArray(e.keyCode, [46, 8, 9, 27, 13, 110]) !== -1 || // Allow: Ctrl+A (e.keyCode == 65 && e.ctrlKey === true) || // Allow: home, end, left, right (e.keyCode >= 35 && e.keyCode <= 39)) { // let it happen, don't do anything return; } // Ensure that it is a number and stop the keypress if ((e.shiftKey || (e.keyCode < 48 || e.keyCode > 57)) && (e.keyCode < 96 || e.keyCode > 105)) { e.preventDefault(); } }); });

Is it possible to theme it like https://bootsnipp.com/snippets/55ae8
where control buttons are up and down instead of side by side ?

Some browsers do not support the object Intl.

If do not want to support older browsers, is there a way to disable this feature?

I want to be able to modify the min / max values of the spinner based on events on the page. If the user selects certain options in the form, then the valid range of values should change based on that.

It looks like the min and max are read and stored in the JS procedure on the call to inputSpinner(), and are not modifiable after that.

For some reason, when I hook up the code below, the change event is fired when the InputSpinner is initialized. Is there any reason for this? Or how to prevent this?

$('input.input-spinner').on('change', function (e) {
  var count = $(this).val();        
  console.log("Spinner count has changed: ", count);
});       

$('input.input-spinner').InputSpinner();

Spinner is a nice control (thanks!), but I'm having problems with the plus button (button on right hand side of the text input) wrapping to underneath the text input. Obviously that makes it look pretty screwy.

My text input is inside of a td and I have set a specific width on it in order to keep it from hogging more space than it needs to enter a 2-digit age. Looks great when my browser is maxed, but as I shrink the width, not so great.

Hello can I remove number formatting (1,000 => 1000)

Regards
Bogdan

Hello there

I'm running this in localhost. The plus and minus sign of the spinner are not showing up. The browser only shows a default spinner

here is my page

`
<!doctype html>

<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="css/styles.css" >

<!-- JQuery -->
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js" integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=" crossorigin="anonymous"></script>

<!-- Extra scripts for BS  -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

<script src="http://localhost/front-end/js/bootstrap-input-spinner.js"></script>

<script>
    jQuery("input[type='number']").inputSpinner()
</script>

<script>
  jQuery( function() {
    jQuery( ".datepicker" ).datepicker();
  } );
</script>

<div class="form-container">

  <form class="form-horizontal" action="" method="POST">

      <!-- Number of adults-->
      <div class="form-group">
        <label class=" control-label" for="adults">Adults</label>
        <div class="">
          <input name="adults" type="number" value="0" min="0" max="5" step="1" />
        </div>
      </div>

      <!-- Number of children -->
      <div class="form-group">
        <label class="control-label" for="children">Children</label>
        <div class="">
           <input name="children" type="number" value="0" min="0" max="5" step="1"/>
        </div>
      </div>

      <!-- Number of infants -->
      <div class="form-group">
        <label class=" control-label" for="infants">Infants</label>
        <div class="">
          <input name="infants" type="number" value="0" min="0" max="5" step="1"/>
        </div>
      </div>

     

      </fieldset>
      </form>

     </div>

`

Here is a real scenario:
I am working on a project where a user has to input an amount in Euro. The project is local-based in Greece so the locale is strictly with comma , as decimal separator and dot . as thousand seperator.

I am using a macOS environment which is in english with greek localisation. But all my browsers (chrome, firefox, safari) are in english and none of them doesn't seem to understand my localisation. So the display of this input field for decimal is with dot . instead of comma.
I assume that there are a lot of others with the same configuration as mine.

Think also that a greek user who lives in a foreign country and she has to complete the form with the amount field of course in Euro currency but her browser configuration is in different localisation.

It's frustrating. I understand that it may be a browser issue, but as developers we have to give the right UX to our users.

I propose to bring back as config option the locale and keep as fallback the navigator.language. If there is a multi-language website and there is need of both decimal point display, the locale could be loaded dynamically in config through language url parameter.

Script creates two widgets at the time on every number input

Two input groups

call:

$("input[type='number']").inputSpinner();

Hi,
I am using bootstrap-input-spinner inside datatables responsive and it works perfect on desktop or on mobile devices with hi res.
But on mobiles or low res the numbers disappear.
Only inside datatables, outside still perfect.
anyone ?
Just me ?

how to destroy instances?

First, this library is very helpful, thank you!

Can I change style of the buttons (eg. btn-outline-secondary to btn-secondary) without hacks?

Hi,
Is it possible to disable bootstrap validation ? Because check appears on top of input values.
Thanks.

Hi,

Just a note to those not wanting any separators/grouping (and maybe a feature request), eg when using number input for years or because of issues parsing the symbol.

obviously, you could add another property/variable and use that, but as a quick fix, this works.

on line 76 you should find this:

        var numberFormat = new Intl.NumberFormat(locale, {
            minimumFractionDigits: decimals,
            maximumFractionDigits: decimals               
        });

simply add useGrouping: false to the options, making:

        var numberFormat = new Intl.NumberFormat(locale, {
            minimumFractionDigits: decimals,
            maximumFractionDigits: decimals,
            useGrouping: false
        });

Thanks!

As currently written, the plugin has the "type" property of the resulting input hard-coded as "text". This creates a type="text" input regardless of the original input type (for example, "number"). This hurts the "mobile-friendliness" claim of the addon because if a user tries to interact with an input that is supposed to be of a particular type, the mobile browser will instead revert to full-text input.

I'm using bootstrap 4 and displaying this in an html table cell. In the attached image you will note that the vertical alignment is different from the other controls in the table row. The other inputs around it are all "form-control-sm" and I have initialized as follows:

$("input[type='number']").inputSpinner({
groupClass: "input-group-sm",
buttonsWidth: "0.5rem"
});

For some strange reason, the value of the input spinner is not shown (or updated) when it's set manually using a jQuery statement like:

$('input.input-spinner').val(count);

Is there something obvious I'm missing? Consider the html fragments below. When I debug the code and inspect the spinner object, I can see the value is updated but the UI doesn't reflect this.

<div class="form-row">
        <div class="col-2">
            <input class="input-spinner" type="number" min="0" max="25" step="1" />
        </div>
        <div class="col">
            <button class="btn btn-primary">Set!</button>
        </div>
</div>    

And the script

<script>

        $('button.btn-primary').on('click', function (e) {
            var count = 10;

            console.log("Setting count on spinner: " + count);
            
            var spinner = $(this).closest('.form-row').find('input.input-spinner');
            spinner.val(count);
        });

        $('input.input-spinner').on('change', function (e) {
            var count = $(this).val();
            if (count === "")
                return;

            console.log("Spinner count: " + count);
        })

        $('input.input-spinner').InputSpinner();        

</script>

Also, in the fragment above, the Change events is fired on initializing the spinner, is that a known issue?

I have <input type="number" id="input-spinner" data-decimals="1" ...> in my html and I try to change data-decimals attribute dynamically from '1' to '0' but it doesn't work, nothing changes:
$('#input-spinner').prop('data-decimals', '0');
How can I fix it?

Getting: TypeError: this[0] is undefined bootstrap-input-spinner.js:14:13

Ended up changing:

if (this[0]["bootstrap-input-spinner"] && this[0].setValue) { this[0].setValue(value) }

to

if (this["bootstrap-input-spinner"] && this.setValue) { this.setValue(value) }

non-numeric symbols except '.' might not be available )))

For now, setting the value is possible with element.setValue(). Because it is a jQuery plugin it would be handy to use the val() function to set and read the value of the element.

Hello,

it seems that Apple has stopped using the Intl librairy :

line 238 : ReferenceError: Can't find variable: Intl

Is there a way to fix it ?

Thank you

I want to use this nice library to send AJAX data if value changed. But with the normal solution it will send the data to often. Do you have an idea to call the change event some seconds after the keyup event detected and if a user press it again the timeout will reset.

This is what I tried -

//included js by downloading src file : bootstrap-input-spinner.js

<script>
	$("input[type='number']").inputSpinner();
</script>

I see the spinner but click on "+"/"-" doesn't change the value.

Am I missing something here?

Another weird thing I noticed - if I init $("input[type='number']").inputSpinner(); in a my page js file for eg:
$(document).ready(function () {
$("input[type='number']").inputSpinner();
}

+/- click works but placeholders are shown incorrectly

so here, instead of 1, I see 0 in the textbox of spinner

Can you add the configuration option to set the form-control class? Eg. form-control-sm or form-control-lg?

With the following control:
<input id="<anythig>" name="<anythig>" type="number" value="0" min="-10" max="0">
The upper limit of zero is not being respected.
The problem is in line 65 of the file:
var max = parseFloat($original.prop("max")) || Infinity
in the case of max = 0 as a valid value 0 || Infinity => Infinity
Proposed correction:
var max = isNaN($original.prop("max")) ? Infinity : parseFloat($original.prop("max"))
Only if max is not a valid number the Infinity will be assigned.

I Need for example: <input type="number" value="2" data-price="5.2" />

Not so much of an issue, rather a question. I really like this implementation of the input spinner, for its simplicity and integration with bootstrap. Were currently evaluating the use of Vuejs for a project where we input spinner is used, any chance we could use the spinner together with Vue?