您的位置:首页> 前端教程> HTML教程
文章导航

HTML step 属性

2018-11-21 19:10| 作者: admin| 查看: 1555| 评论: 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数字控件中的应用:

关于数字控件基本用法参阅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一章节。


鲜花

握手

雷人

路过

鸡蛋

最新评论

返回顶部