up
down
Close
架站盒子
Web Development Box
 

input 數字範圍類型:number、range

│ 4019 Views │ HTML
input 數字範圍類型:number、range
input 數字範圍類型:number、range
  1. number 類型
  2. range 類型
  3. 如何讓 range 顯示數值?

製作網頁經常會用到表單,其中也很常使用到數字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 類型

rangenumber一樣都是方便讓使用者調整數字,不過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>

延伸閱讀

本文是否對您有幫助?