html 范围滑块 - oninput 在 IE 11 中不起作用
Posted
技术标签:
【中文标题】html 范围滑块 - oninput 在 IE 11 中不起作用【英文标题】：html range slider - oninput does not work in IE 11 【发布时间】：2016-03-18 16:30:51 【问题描述】：我已经实现了一个范围滑块，它使用该值从数组中获取一个元素并显示它，而不是显示范围值。它适用于 Chrome 和 Firefox，但不适用于 IE 11 - 当滑块移动时，该值不会获得更新的元素。
html：
<div id="yearSlider" style="z-index:2;">
<form>
<div align="center">
<input
type="range"
min=1
max=10
value=0
id="fader"
step=1
oninput="outputUpdate(years[value])"
>
<output for=fader id=volume>1908</output>
</div>
</form>
var years = [0,1908, 1910, 1912, 1915, 1920, 1935, 1949, 1982, 2005, 2015];
function outputUpdate(vol)
document.querySelector('#volume').value = vol;
通过搜索，我发现这与“oninput”在 IE 中的工作方式（或不工作方式）有关。
我尝试合并来自here的解决方案
<input
type="range"
min="5"
max="10"
step="1"
oninput="showVal(this.value)"
onchange="showVal(this.value)"
>
但它仍然没有更新。
我的jsfiddle
【问题讨论】：
IE 在更改范围时仅触发 change event。另一件事，<output> 是not supported in IE，请改用span。 A fiddle 使用 IE。
@Teemu，为什么不将您的评论转换为答案？无论如何，它与this question 重复。
【参考方案1】：
您可以使用下面的代码来获取滑块：
<body>
<div id="yearSlider" style="z-index:2;">
<form>
<div align="center">
<input
type="range"
min=1
max=10
value=0
id="fader"
step=1
onchange="outputUpdate(value)"
>
<span for=fader id=volume>1908</span>
</div>
</form>
</div>
<script>
var years = [0,1908, 1910, 1912, 1915, 1920, 1935, 1949, 1982, 2005, 2015];
function outputUpdate(vol)
document.getElementById('volume').innerHTML=years[vol];
</script>
【讨论】：
以上是关于html 范围滑块 - oninput 在 IE 11 中不起作用的主要内容，如果未能解决你的问题，请参考以下文章
IE9浏览器onpropertychange和oninput事件对delete键和剪切不触发问题解决方法
oninput,onpropertychange,onchange的用法和区别
实时监听输入框值变化：oninput & onpropertychange