JSP 頁面實現數字輸入框加減按鈕 (Spinner) 組件

需求

固定基數 1000.00，點擊「上」加 1，點擊「下」減 1，類似數字微調器。

方案一：成熟 UI 庫組件 (推薦)

• EasyUI NumberSpinner：``
• jQuery UI Spinner：`$("#spinner").spinner({ min: 0, step: 1, numberFormat: "n" });`
• Bootstrap TouchSpin、Element UI InputNumber (Vue) 等。

方案二：原生 JS + CSS 輕量實現 (無依賴)

<style>
.spinner { display: inline-flex; border: 1px solid #ccc; border-radius: 4px; overflow: hidden; font-family: sans-serif; }
.spinner input { border: none; width: 60px; text-align: center; padding: 4px; outline: none; -moz-appearance: textfield; }
.spinner input::-webkit-outer-spin-button, .spinner input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.spinner button { background: #f0f0f0; border: none; width: 28px; cursor: pointer; font-size: 14px; line-height: 1; }
.spinner button:hover { background: #e0e0e0; }
.spinner button:active { background: #d0d0d0; }
</style>

<div class="spinner">
  <button type="button" onclick="changeValue(this, -1)">−</button>
  <input type="text" value="1000.00" readonly id="numInput">
  <button type="button" onclick="changeValue(this, 1)">+</button>
</div>

<script>
function changeValue(btn, delta) {
  var input = btn.parentElement.querySelector('input');
  var val = parseFloat(input.value) || 0;
  val = Math.max(0, val + delta); // 不小於 0
  input.value = val.toFixed(2);   // 保留兩位小數
}
</script>

方案三：HTML5 原生 `` (最簡單)

<input type="number" value="1000" min="0" step="1" style="width:80px;">

瀏覽器自帶上下箭頭，支援鍵盤輸入、驗證，無需任何 JS/CSS。若需固定兩位小數，用 `step="0.01"` 並配合 JS 格式化。

選擇建議

• 專案已引入 UI 庫 → 直接用庫組件，風格統一、功能全。
• 輕量頁面/無庫依賴 → HTML5 `type="number"` 最高效，或原生 JS 方案可控性最強。