HTML input range

admin發表於2018-11-12
HTML

通過滑鼠拖動方式設定值是很方便的操作。

將input的type屬性值設定為"range"即可建立具有上述功能的控制元件。

此控制元件是HTML5新增。

程式碼例項如下：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title> 
</head>
<body>
<form name="myform" method="post">
   請選取數字：<br/>
  <input type="range" min="1" max="10" name="range">
</form>
</body>
</html>

程式碼執行效果截圖如下：

a:3:{s:3:\"pic\";s:43:\"portal/201811/12/013849fz9unc8mzihw8mu4.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

此控制元件屬性眾多，下面介紹一下它的主要屬性：

（1）.autofocus（HTML5）：規定頁面載入後，此控制元件是否自動獲取焦點。

（2）.disabled：設定此控制元件不可用，既不能拖動，也不能提交它的值。

（3）.form（HTML5）:屬性值為form表單的id屬性值，可以將一個控制元件歸屬於多個form表單。

（4）.list（HTML5）:與datalist關聯起來。

（5）.min與max（HTML5）:這兩個屬性可以規定控制元件可以選取的最小值與最大值。

（6）.step（HTML5）:規定數字選取變化的梯度。

（7）.value：規定控制元件當前選取的值。

程式碼例項如下：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<script>
window.onload=function(){
  let orange=document.querySelector("#num");
  let obt=document.querySelector("#bt");
  let odiv=document.querySelector("#show");
  obt.onclick=function(){
    odiv.innerHTML=orange.value;
  }
}
</script>
</head>
<body>
<input type="range" id="num" min=1 max=10 name="range">
<input type="button" id="bt" value="檢視效果"/>
<div id="show"></div>
</body>
</html>

拖動可以調整選取值的大小，點選按鈕可以將選取的值寫入div。

通過min屬性設定最小值為1，max設定最大值為10。

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<script>
window.onload=function(){
  let orange=document.querySelector("#num");
  let obt=document.querySelector("#bt");
  let odiv=document.querySelector("#show");
  obt.onclick=function(){
    odiv.innerHTML=orange.value;
  }
}
</script>
</head>
<body>
<input type="range" id="num" min=1 max=10 list="softwhy" name="range">
<datalist id="softwhy">
  <option  value="2"/>
  <option  value="3"/>
  <option  value="4"/>
  <option  value="5"/>
</datalist>  
<input type="button" id="bt" value="檢視效果"/>
<div id="show"></div>
</body>
</html>

程式碼執行效果截圖如下：

a:3:{s:3:\"pic\";s:43:\"portal/201811/12/013948ltrb2bnrssddz2db.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

通過控制元件的list屬性與datalist關聯起來。

datalist可以在控制元件上方顯示刻度，刻度值通過option的value屬性設定。

點選刻度將控制元件按鈕定位到對應value值位置。關於datalist用法參閱HTML datalist 選項列表一章節。

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<script>
window.onload=function(){
  let orange=document.querySelector("#num");
  let obt=document.querySelector("#bt");
  let odiv=document.querySelector("#show");
  obt.onclick=function(){
    odiv.innerHTML=orange.value;
  }
}
</script>
</head>
<body>
<input type="range" id="num" min=1 max=10 step="3" name="range">
<input type="button" id="bt" value="檢視效果"/>
<div id="show"></div>
</body>
</html>

通過step設定數字變化的梯度，預設值為1。

大家可以自定拖動控制元件按鈕，感受此屬性的作用。

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title> 
</head>
<body>
<form name="myform" id="ant" method="post" action="#"> 
  <input type="submit" value="提交表單"/>
</form>
<input form="ant" type="range" name="range"> 
</body>
</html>

程式碼分析如下：

（1）.在HTML5之前，表單元素必須要位於<form>元素之內，以表明它的所屬。

（2）.HTML5新增form屬性，將其值設定為指定<form>元素的id屬性值，這樣表單元素即可與指定<form>表單關聯起來，沒必要將表單元素至於其內，並可以歸屬於多個表單。

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<script>
window.onload=function(){
  let orange=document.querySelector("#num");
  let odiv=document.querySelector("#show");
  odiv.innerHTML=orange.value;
  orange.onmousemove=function(){
    odiv.innerHTML=this.value;
  }
}
</script>
</head>
<body>
<input type="range" id="num" min=1 max=20 step="1">
<div id="show"></div>
</body>
</html>

上述程式碼中，通過滑鼠拖動控制元件，實時將控制元件的值寫入div。

此種效果在現實中需求更多，結合JavaScript實現，需要的朋友做一下參考。

相關閱讀：

（1）.mousemove事件參閱JavaScript mousemove一章節。

（2）.innerHTML屬性參閱JavaScript innerHTML一章節。

相關文章