HTML step 屬性

admin發表於2018-11-21
HTML

step屬性用於規定資料每一次變化的梯度，或者說資料之間的間隔值。

假設step屬性值為5，那麼兩個資料之間的差是5*N（N是整數）。

通常與min以及max屬性配合使用。

HTML5新增此屬性。

如下型別的input元素具有此屬性：

（1）.number

（2）.range

（3）.date

（4）.datetime

（5）.datetime-local

（6）.month

（7）.time

（8）.week

本文僅介紹一下step屬性在number與range中的應用，比較典型。

其他型別控制元件中的應用大同小異，並且使用遠不如上面兩個控制元件頻繁。

感興趣的朋友可以自行測試一下，非常簡單。

一.numer數字控制元件中的應用：

關於數字控制元件基本用法參閱HTML input number 數字控制元件一章節。

step屬性用於規定數字每次變化的幅度，有一些細節需要特別注意。

首先看一段程式碼例項：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
</head>
<body>
<form>
  <input type="number" step="1.2" min="1"/> 
  <input type="submit" id="bt" value="檢視效果"/>
</form>
</body>
</html>

當在數字控制元件輸入1.2，提交表單驗證不通過，執行效果截圖如下：

a:3:{s:3:\"pic\";s:43:\"portal/201811/21/191109hp11z8k1xq89o551.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

上述程式碼規定step屬性值是1.2，但是控制元件值為1.2時，表單提交驗證並不會通過。

修改上面的程式碼，將min屬性刪除，程式碼如下：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
</head>
<body>
<form>
  <input type="number" step="1.2"/> 
  <input type="submit" id="bt" value="檢視效果"/>
</form>
</body>
</html>

刪除min屬性之後，控制元件中輸入數值1.2，表單提交驗證則能夠順利通過。

可見輸入數值的合法性與step和min屬性值密切相關，與max無關。

當然本文所講到的合法性必須在min與max所限定範圍基礎上的合法性。

規則總結如下：

（1）.控制元件的數值必須遵循min + step * N的規則，假如min=1，step=1.2，那麼控制元件可允許的合法值可以是1+1.2*0、1+1.2*1、1+1.2*2或者1+1.2*3等，以此類推，當然也可以是負數，1+1.2*-2等等。

（2）.如果不規定min值，那麼控制元件允許的數值可以無限小，不過對於驗證規則而言，它等於0。

二.range控制元件中的應用：

原理大同小異，數值合法性計算規則與上述相同。

但是在提交表單的時候，預設不會報錯，並且會將值自動糾正距離錯誤值最近的正確值。

[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>
<form action="#">
  <input type="range" step="2.1" id="num" min="1" value="5.0" max="10" />
  <input type="submit" id="bt" value="檢視效果"/>
</form>
<div id="show"></div>
</body>
</html>

上述程式碼中，我們將range的value值設定為5.0，根據計算規則，值很明顯不合法。

但是實際獲取到的值卻是合法的5.2，這說明控制元件將值自動糾正為它最接近的合法值。

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

a:3:{s:3:\"pic\";s:43:\"portal/201811/21/191157w3nqqwx3gh70b7g0.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

關於range的基本用法可以參閱HTML input range一章節。

相關文章