我们相信：世界是美好的，你是我也是。 来玩一下解压小游戏吧！

本文描述一个比较罕见的输入框，是html5里面新出的输入框组件，名字叫做range，就是一个范围值。在其他的客户端语言里面，一直是有类似的组件的。但是在页面里面，这确实是新出的新组件。本文对这个组件的使用方法做个简单的总结。

苏南大叔：html5新标签，类型为range的input，如何使用其oninput事件？ - html5-oninput
html5新标签，类型为range的input，如何使用其oninput事件？（图3-1）

苏南大叔的程序如此灵动博客，记录苏南大叔和计算机代码的故事。测试环境：谷歌浏览器@108.0.5359.99。

测试用例

本文的主要运行代码如下：

<input type="range" min="0" max="1000" step="1" value="0" id="test" oninput="javascript:print()" />
<p>当前值为:<span id="print">0</span></p>
<script>
  function print() {
    document.getElementById("print").innerText = document.getElementById("test").value;
  }
</script>
HTML

苏南大叔：html5新标签，类型为range的input，如何使用其oninput事件？ - range-html
html5新标签，类型为range的input，如何使用其oninput事件？（图3-2）

测试用例二

下面是第二个例子，主要利用的是form的oninput事件。

<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">
  <input type="range" id="a" value="50">
  +<input type="number" id="b" value="50">
  =<output name="x"></output>
</form>
HTML

这里还出现了另外一个新的标签<output>。

苏南大叔：html5新标签，类型为range的input，如何使用其oninput事件？ - form-oninput
html5新标签，类型为range的input，如何使用其oninput事件？（图3-3）

标签一览（min/max/step)

<input type="range" min="20" max="80" step="5"/>
HTML

默认是个从0到100的范围控件。但是也可以通过min和max参数进行控制，其实step是步长。

oninput事件

有的文档里面表述事件为onchange，虽然认同度更高。但是在实际的谷歌浏览器环境下测试，并不支持onchange事件，实际生效的为oninput事件。

oninput="javascript:print()"
HTML

获取的是.value值。

document.getElementById("test").value;
JavaScript

结束语

更多html5标签，请参考链接：

如果本文对您有帮助，或者节约了您的时间，欢迎打赏瓶饮料，建立下友谊关系。
本博客不欢迎：各种镜像采集行为。请尊重原创文章内容，转载请保留作者链接。

 【福利】 腾讯云最新爆款活动！1核2G云服务器首年50元！

 【源码】本文代码片段及相关软件，请点此获取更多信息

 【绝密】秘籍文章入口，仅传授于有缘之人   html5