HTML step 属性

小灰灰 2020-05-16 16:29 728阅读 0赞

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数字控件中的应用：**

step属性用于规定数字每次变化的幅度，有一些细节需要特别注意。

首先看一段代码实例：

```html
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.dandelioncloud.cn/" />
<title>蒲公英云</title>
</head>
<body>
<form>
  <input type="number" step="1.2" min="1"/> 
  <input type="submit" id="bt" value="查看效果"/>
</form>
</body>
</html>
```

当在数字控件输入1.2，提交表单验证不通过，运行效果截图如下：

![](/images/1589646549360.png)

上述代码规定step属性值是1.2，但是控件值为1.2时，表单提交验证并不会通过。

修改上面的代码，将min属性删除，代码如下：

```html
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.dandelioncloud.cn/" />
<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.dandelioncloud.cn/" />
<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，这说明控件将值自动纠正为它最接近的合法值。

代码运行效果截图如下：

![](/images/1589646516241.png)