如何使用 JavaScript 从 HTML5 Range 输入类型中获取值

雨点打透心脏的1/2处 2023-10-01 17:24 47阅读 0赞

我们经常在电子商务网站上使用HTML5 Range 输入类型元素作为范围选择器。在这篇文章中，我将分享几个简单的 JavaScript 示例，展示如何从输入类型 Range 中提取或读取值并提交这些值。

![e67a1649b78efb84ae9c432f5bfb56ad.png][]

我没有使用任何[程序代码][Link 1]或[API 来提交数据][API]；此处的示例主要关注如何从 Range 滑块（元素）中提取值，在 <label> 中显示值并使用这些值更新浏览器 URL，仅使用 JavaScript。

该示例使用两个不同的属性，即oninput（HTML5 元素）和onchange来调用 JavaScript 方法以从 Range 滑块中读取或提取值。

### **HTML5 输入类型范围** ###

浏览器支持：Chrome 39.0 - Yes | FireFox 34.0 - Yes | Internet Explorer 10 - Yes | Safari - Yes

**标记**

**注意**：示例不验证**From**和To Range 滑块**。**它只是读取范围值。

<div>
        <p>
            <label>Price From:</label>
            <input type="range" id="fromPrice" value="50" min="0" max="500" 
                oninput="document.getElementById('fPrice').innerHTML = this.value" />
            <label id="fPrice"></label>
        </p>
        <p>
            <label>Price To:</label>
            <input type="range" id="toPrice" value="450" min="0" max="500" 
                oninput="document.getElementById('tPrice').innerHTML = this.value" />
            <label id="tPrice"></label>
        </p>
        <p><input type="submit" value="submit" onclick="ti()" /></p>
    </div>

在上面的标记中，我使用oninput属性来更新带有 Range 值的标签。**注意：** JavaScript 函数**ti()**在这篇博文的末尾。

### **HTML5“oninput”事件属性的语法** ###

oninput='someFunction()'

当您输入一个值时， oninput事件属性会调用一个 JavaScript 函数，在我们的例子中是 Range 滑块。当用户移动滑块时，该属性会立即使用范围值更新标签。

<!DOCTYPE html>
    <html>
    <head>
    <title>HTML5 oninput Attribute Example</title>
    <style>
    	* {font: 20px Calibri;} 
        h3 {font-weight: bold;}
    </style>
    </head>
    <body>
    	<h3>Drag the sliders to see the values. The range is between 0 and 500</h3>
    
        <p>
          <label style="padding-right:20px;">Price From:</label>
          <input type="range" id="fromPrice" value="50" min="0" max="500" 
                 oninput="document.getElementById('fPrice').innerHTML = this.value" />
          <label id="fPrice" style="padding-left:20px;"></label>
      </p>
      <p>
        <label style="padding-right:20px;">Price To:</label>
        <input type="range" id="toPrice" value="450" min="0" max="500" 
               oninput="document.getElementById('tPrice').innerHTML = this.value" />
        <label id="tPrice" style="padding-left:20px;"></label>
      </p>
    </body>
    </html>

*试试看*

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAYWxsd2F5Mg_size_20_color_FFFFFF_t_70_g_se_x_16][]

### **onchange 事件属性的语法** ###

onchange='someFunction()'

onchange事件属性与oninput事件属性不同。一旦用户拖动并停止滑块（在特定位置），onchange 就会更新标签。

<!DOCTYPE html>
    <html>
    <head>
    <title>HTML5 onchange Attribute Example</title>
    <style>
    	* {font: 20px Calibri;} 
        h3 {font-weight: bold;}
    </style>
    </head>
    <body>
    	<h3>HTML5 onchange attribute example</h3>
        <p>
        	Drag the sliders and stop to see its values.
        </p>
    
        <p>
          <label style="padding-right:20px;">Price From:</label>
          <input type="range" id="Range1" value="50" min="0" max="500" 
                 onchange="document.getElementById('Label1').innerHTML = this.value" />
          <label id="Label1" style="padding-left:20px;"></label>
      </p>
      <p>
        <label style="padding-right:20px;">Price To:</label>
        <input type="range" id="Range2" value="450" min="0" max="500" 
               onchange="document.getElementById('Label2').innerHTML = this.value" />
        <label id="Label2" style="padding-left:20px;"></label>
      </p>
    </body>
    </html>

*试试看*

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAYWxsd2F5Mg_size_17_color_FFFFFF_t_70_g_se_x_16][]

**您可能还喜欢：** [什么是 HTML5 <aside> 标签以及如何在您的网站中使用它][HTML5 _aside_]

**剧本**

这是您在单击提交按钮后使用 JavaScript 读取标签中值的方法（我们使用 Range 滑块进行了更新）。一旦我们有了 Range 滑块值，我们就可以使用window.location.replace()方法更新浏览器 URL。

谢谢阅读。

[e67a1649b78efb84ae9c432f5bfb56ad.png]: https://img-blog.csdnimg.cn/img_convert/e67a1649b78efb84ae9c432f5bfb56ad.png
[Link 1]: https://www.encodedna.com/2012/11/call-javascript-codebehind.htm
[API]: https://www.encodedna.com/jquery/dynamically-add-textbox-in-jquery-and-save-data-to-sqlserver-using-webmethod.htm
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAYWxsd2F5Mg_size_20_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/d2058f3e768a4c08839f991179a5d8d8.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAYWxsd2F5Mg==,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAYWxsd2F5Mg_size_17_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/fc314c06306e4340a4d4ba3e3c8cf6c7.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAYWxsd2F5Mg==,size_17,color_FFFFFF,t_70,g_se,x_16
[HTML5 _aside_]: https://www.encodedna.com/html5/html5-aside-element-example.htm