帶上下箭頭的數字輸入框控件實現方案（Bootstrap Spinner）

需求

需要一個包含上下箭頭按鈕的數字輸入框，非原生 HTML5 `` 樣式，類似下圖：

解決方案：Bootstrap 3 Input Spinner

使用 Bootstrap 3 配合簡單的 JavaScript 即可實現美觀、功能完整的 Spinner 控件。

核心代碼

<div class="input-group spinner">
  <input type="text" class="form-control" value="1">
  <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>

<script>
$('.spinner .btn:first-of-type').on('click', function() {
    var input = $(this).closest('.spinner').find('input');
    input.val(parseInt(input.val()) + 1);
});
$('.spinner .btn:last-of-type').on('click', function() {
    var input = $(this).closest('.spinner').find('input');
    var val = parseInt(input.val()) - 1;
    if (val >= 0) input.val(val);
});
</script>

參考資源

完整樣式與擴展（步長、最小/最大值）可參考：Bootstrap 3 input spinner 實現詳解

替代方案

• jQuery UI Spinner
• 原生 `` 配合 CSS 自定義箭頭樣式（現代瀏覽器支援 `::-webkit-inner-spin-button` 隱藏原生箭頭）。