製作網頁經常會用到表單，其中也很常使用到數字input，不過如果用傳統一般的input可能會被輸入非數字的內容，或是希望能有範圍條讓使用者輕鬆調整數字，那麼要怎麼做呢？今天就來看看 HTML5 input的數字範圍類型吧。
number 類型
使用type="number"即可指定input為數字限定，且提供上下箭頭來調整數字。
範例
年級
<input type="number" value="1" name="grade" min="1" max="9" step="1" required>
- type 指定類型
- number 數字類型（含有上下箭頭）
- value 預設值
- name 自訂提交的name值
- min 最小值（可為負數或小數）
- min 最大值
- step 數值差（每次增減差）
- required 規定此欄位必填
range 類型
range跟number一樣都是方便讓使用者調整數字，不過range顯示的是一條 Bar，其缺點在於無法知道精準的數值是多少，通常用於調整音量或明暗度等。
範例
<input type="range" value="1" min="1" max="100" step="1">
- type 指定類型
- range 數字類型（Bar）
- value 預設值
- min 最小值（可為負數或小數）
- min 最大值
- step 數值差（每次增減差）
如何讓 range 顯示數值？
如果希望用 bar 調整精準數值，只要用 jQuery 去監聽並顯示即可。
範例
1
CSS＋HTML＋jQuery
<style>
.myDiv{
position: relative;
}
#rangeTxt{
position: absolute;
top: 0;
left: 70px;
}
</style>
<div class="myDiv">
<input type="range" id="myRange" value="1" min="1" max="100" step="1">
<span id="rangeTxt"></span>
</div>
<script>
$("#rangeTxt").html($("#myRange").val()); // 在 #rangeTxt 顯示 #myRange 的 bar 值
$("#myRange").on("input", function(){ // 當輸入 input 時執行以下動作
$("#rangeTxt").html($(this).val()); // 將本數值顯示在 #rangeTxt 上
});
</script>
本文是否對您有幫助？