如何使用键盘箭头键移动 html5 范围 slider 句柄
[英]How can i move html5 range slider handle using keyboard arrow keys
问题描述
When i came across the html5 range slider with larger max values the slider gets jumped to higher values and cant able to take the middle vaues while moving with mouse.
当我遇到具有较大最大值的 html5 范围 slider 时，slider 会跳到更高的值，并且无法在用鼠标移动时获取中间值。 So im trying to control the slider using keyboard with the help of javascript or some other.所以我试图在 javascript 或其他一些帮助下使用键盘控制 slider。 im a newbie to this one.我是这个的新手。 could anybody pls help me.任何人都可以帮助我。 Thanks in advance提前致谢
3 个解决方案
解决方案1
5 已采纳 2012-04-09 12:02:35
You don't need to use Javascript to control the slider, but you do need a bit of help from Javacript to focus the slider element.您不需要使用 Javascript 来控制 slider，但您确实需要 Javacript 的一些帮助来聚焦 slider 元素。 If the user tabs to the element, it would work without any Javascript at all.如果用户跳转到该元素，它会在没有任何 Javascript 的情况下工作。
Eg例如
<html><head><title>bla</title></head>
<body>
<input type="range" id="slider" min="0" max="100" value="50" />
<script type="text/javascript">
document.getElementById('slider').addEventListener('click', function() {
this.focus();
});
</script>
</body>
</html>
For multiple sliders, you can do this inside the <script> tag.对于多个滑块，您可以在<script>标记内执行此操作。 You don't need any code on the individual sliders:您不需要在各个滑块上使用任何代码：
<script>
var inputs = document.getElementsByTagName('input');
for(var i = 0; i < inputs.length; i++) {
if(inputs[i].type == 'range') {
inputs[i].addEventListener('click', function() {
this.focus();
});
}
}
</script>
解决方案2
3 2012-04-09 11:42:05
Maybe you need something like this: example in jsfiddle .也许您需要这样的东西： jsfiddle 中的示例。 The slider can be moved normally with the mouse but if you click the button you have a precision move with the arrows, if you click again, the listener is removed and the arrows do nothing. slider 可以用鼠标正常移动，但如果你点击按钮，你可以用箭头精确移动，如果你再次点击，监听器被移除，箭头什么也不做。
解决方案3
0 2020-05-20 11:25:26
I found that, given that a script already exists for managing the slider, you just need to add to the slider the attribute "step" to set the amount of change caused by keypress.我发现，假设已经存在用于管理 slider 的脚本，您只需向 slider 添加属性“step”以设置按键引起的变化量。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.