Bootstrap Snippet Input-number using HTML CSS Javascript

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
    <div class="row">
            <form class="form-horizontal">
            <fieldset>
            <!-- Form Name -->
            <legend>Form Name</legend>
            
                <div class="form-group">
                  <div class="input-group input-number text-center">
                    <div class="input-group-addon">Deposit</div>
                    <input type="text" value="10000" data-type="number" data-max="10000" data-min="20" data-step="5" class="form-control" id="InputAmount" placeholder="Amount">
                    <div class="input-group-btn-vertical">
                      <button class="btn btn-default" type="button">
                        <i class="fa fa-caret-up"></i>
                      </button>
                      <button class="btn btn-default" type="button">
                        <i class="fa fa-caret-down"></i>
                      </button>
                    </div>
                  </div>
                </div>
            
            <!-- Button -->
            <div class="form-group center-block">
              <div class="text-center">
                <button id="singlebutton" name="singlebutton" class="btn btn-primary">Button</button>
              </div>
            </div>
            
            </fieldset>
            </form>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
/*==========================================================================
+ Input-number
==========================================================================*/
.input-number {
    width: 300px;
    margin-left: -10px;
    margin-right: 10px;
    &.input-2x {
        width: 600px;
    }
    input {
        text-align: center;
        margin-left: 0px;
    }
    input[type=number]{
        -moz-appearance: textfield;
    }
    input[type=number]::-webkit-inner-spin-button,
    input[type=number]::-webkit-outer-spin-button {
        -webkit-appearance: none;
        margin: 0;
    }
}
.input-group-btn-vertical {
    position: relative;
    white-space: nowrap;
    width: 1%;
    vertical-align: middle;
    margin-left: 10px;
    height: 46px;
    display: table-cell;
    > .btn {
        display: block;
        float: none;
        width: 100%;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
(function($) {
  $('body').on('input', ".input-number input[data-type='number']", function(e) {
    this.value = this.value.replace(/[^0-9.]/g, '');
    if(!this.value){
      var min = 10;
      if ($(this).data('min')) {
        min = parseInt($in.data('min'), 10);
      }
      $(this).val(min);
    }
  });
  $('body').on('change', ".input-number input[data-type='number']", function(e) {
    var $in = $(this);
    var min = 10;
    var max = 10000;
    var step = 1;
    if ($in) {
      if ($in.data('min')) {
        min = parseInt($in.data('min'), 10);
      }
      if ($in.data('max')) {
        max = parseInt($in.data('max'), 10);
      }
      if ($in.data('step')) {
        step = parseInt($in.data('step'), 10);
      }
      var inputVal = parseInt($in.val(), 10);
      if (inputVal > max) {
        $in.val(max);
      } else if (inputVal < min) {
        $in.val(min);
      } else if ((inputVal - min) % step != 0) {
        $in.val(inputVal - ((inputVal - min) % step));
      }
    }
  });
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Input-number"
Bootstrap 3.3.0 Snippet by dashkootek

Related: See More

Questions / Comments:

"Input-number" Bootstrap 3.3.0 Snippet by dashkootek

Related: See More

Questions / Comments:

"Input-number"
Bootstrap 3.3.0 Snippet by dashkootek