如何在Firefox中拖动时触发input type=range的onchange事件

Onchange： 当用户更改select元素的状态时，执行JavaScript。此属性仅在元素失去焦点时发生。

语法：

<select onchange="function()">

属性值: 在 <select> 元素上起作用，并在值被提交后触发给定的JavaScript。

示例:

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>Onchange</title> 
    <script type="text/javascript"> 
        function Optionselection(select) { 
            var chosen = select.options[select.selectedIndex]; 
            alert("Option Chosen by you is " + chosen.value); 
        } 
    </script> 
</head> 
  
<body> 
    <center> 
        <h1 style="color:green">GeeksforGeeks</h1> 
        <p>Choose an option from the following:</p> 
        
        <select onchange="Optionselection (this)"> 
            <option value="C++" />C++ 
            <option value="Java" />Java 
            <option value="Python" />Python 
        </select> 
    </center> 
</body> 
  
</html>

输出:

之前：如何在Firefox中拖动时触发input type=range的onchange事件？

之后：

如何在Firefox中拖动时触发input type=range的onchange事件

对于一个范围滑块，通常的用户界面设计是当用户移动滑块时，即时显示所示值的变化。但对于上述的浏览器（包括Chrome）来说，并非如此。

尽管有人可以争辩说Firefox展示了正确的行为，因为只有在控件失去焦点时（无论是鼠标拖拽还是键盘），“更改事件”才会执行。但为了同时显示变化的值和移动的滑块，需要应用“输入事件”属性。

输入事件: 与“更改事件”类似，它在接收到用户输入值时起作用。主要区别在于，它在元素的值更改时立即执行。

语法:

<element oninput = "script">

演示解决方案的程序：

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>onchange event on input type=range</title> 
</head> 
  
<body> 
    <center> 
        <h1 style="color:green">GeeksforGeeks</h1> 
        <p>onchange event on input "type=range"</p> 
  
        <span id="value"></span> 
        <input type="range" 
               min="1"
               max="10" 
               step="1" 
               oninput="DisplayChange(this.value)"> 
        <script> 
            function DisplayChange(newvalue) { 
                document.getElementById( 
                  "value").innerHTML = newvalue; 
            } 
        </script> 
    </center> 
</body> 
  
</html>

输出：

之前：

如何在Firefox中拖动时触发input type=range的onchange事件