网站链接: 我爱捣鼓
当前位置: 首页 > 前端开发  > html5

html5中如何判断验证input range滑动条输入范围最小值和最大值?

2021/3/21 14:21:47

在没有html5之前,我们要实现form表单的input滑动条功能是非常复杂的,需要js写若干行代码才能进行验证,但有了html5之后,就有了range类型的input来实现滑块效果,滑块最大值和最小值的验证也变得非常简单。对这些数值类型的输入元素,可以指定min属性(最小的可能值)、m…


在没有html5之前,我们要实现form表单的input滑动条功能是非常复杂的,需要js写若干行代码才能进行验证,但有了html5之后,就有了range类型的input来实现滑块效果,滑块最大值和最小值的验证也变得非常简单。对这些数值类型的输入元素,可以指定min属性(最小的可能值)、max属性(最大的可能值)和step属性(从min到max的两个刻度之间的差值)。

效果图片


微信截图_20210321151322.png

举例说明:

HTML代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>html5中如何判断验证input range滑动条输入范围最小值和最大值?</title>
</head>
<body>
<form id="form1" name="form1" method="post" action="http://www.woaidaogu.com/index.aspx">
<input type="range"  min="0"  max="10" step="2"  id="range">
</form>
</body>
</html>


以上input设置了输入的最大值10和最小值0


JavaScript代码

<script language="JavaScript" type="text/javascript">
    var oInput = document.getElementById("range");
    oInput.type = "range";
    oInput.stepUp()
    //每次加1
    oInput.stepUp(5)
    //每次加5
    oInput.stepDown()
    //每次减1
    oInput.stepDown(10)
    //每次减10
    oInput.onchange = function () {
        document.getElementById("r_value").innerHTML = document.getElementById("range").value;
    };
    oInput.onchange();
</script>



全部代码


<!DOCTYPE html
    PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>html5中如何判断验证input range滑动条输入范围最小值和最大值?</title>
</head>
<body>
    <form id="form1" name="form1" method="post" action="http://www.woaidaogu.com/index.aspx">
        <input type="range" min="0" max="10" step="2" id="range">
        <span id="r_value"></span>
    </form>
</body>
<script language="JavaScript" type="text/javascript">
    var oInput = document.getElementById("range");
    oInput.type = "range";
    oInput.stepUp()
    //每次加1
    oInput.stepUp(5)
    //每次加5
    oInput.stepDown()
    //每次减1
    oInput.stepDown(10)
    //每次减10
    oInput.onchange = function () {
        document.getElementById("r_value").innerHTML = document.getElementById("range").value;
    };
    oInput.onchange();
</script>
</html>


这个就是我们实现滑块功能及最大值、最小值的限制,是不是很简单,希望对大家有所帮助!


相关资讯

  • html5新增元素document.queryselector属性

    document.queryselector其实也不算是html5的新增元素,它只是继承了html4的属性,今天我们就来说说document.queryselector属性如何使用? 先看一个实例,结合实例分析一下:<!DOCTYPE html><html><head> <meta charset="UTF-8"&a…

    2021/5/9 14:06:38
  • html5身份证照片上传及预览缩略图-附源码

    html5页面上传图片很方便,主要用到了html5的FileReader方法,今天我们就通过身份证照片上传作为例子来说说它的用法。调用FileReader对象的方法FileReader 的实例拥有 4 个方法,其中 3 个用以读取文件,另一个用来中断读取。下面的表格列出了这些方法以及他们的参数和功…

    2021/3/28 10:52:43
  • 用实例告诉你html5画图功能如何使用?附源码

    在html5中可以使用canvas标签在画布上画图,先直接上代码,这篇文章先简单介绍一下canvas的使用方法,简单画几个圆,矩形,三角形,写字。在代码中均给出了注释,在这里特别强调的一点是:使用canvas画图时有时候必须beginPath和colsePath,但有时不需要,为了防止出现问题…

    2021/3/21 14:51:36
  • 实例告诉您HTML5的WEB SQL数据库如何使用?含源码

    Web SQL数据库API实际上未包含在HTML 5规范之中,它是一个独立的规范,它引入了一套使用SQL操作客户端数据库的API。假设你是一名优秀的Web开发人员,那毫无疑问,你对SQL和数据库的相关概念已经很熟悉了,如果你对SQL不熟悉,那在继续阅读本文之前,最好先学习一下SQL相关…

    2021/3/9 22:21:35
  • HTML5如何实现浏览器页面全屏显示及退出全屏的效果?

    在越来越真实的web应用程序中,JavaScript也变得越来越给力.FullScreen API 是一个新的JavaScript API,简单而又强大. FullScreen 让我们可以通过编程的方式来向用户请求全屏显示,如果交互完成,随时可以退出全屏状态.在线演示Demo: Fullscreen API Example(在此Demo中,可…

    2021/3/9 22:17:42