如何使用鍵盤箭頭鍵移動html5範圍滑塊手柄

當我遇到具有較大最大值的html5範圍滑塊時，滑塊會跳到較高值，並且無法在使用鼠標移動時採用中間vaues。所以即時通訊嘗試控制滑塊使用鍵盤的幫助下的JavaScript或其他。即時通訊這個新手。任何人都可以幫助我。在此先感謝如何使用鍵盤箭頭鍵移動html5範圍滑塊手柄

來源

2012-04-09 Prasanth K C

你是什麼意思_with具有較大的最大值滑塊獲得更高的值_？考慮我爲你製作的這個例子http://jsfiddle.net/webdevel/aTaA8/2/ – 2012-04-09 09:51:20

我認爲他意味着有更少的像素比有值，所以它是不可能得到一個確切的價值使用老鼠。例如，您的值爲1 - > 100，但滑塊寬度僅爲50px，因此鼠標會給出2的分辨率，並且鍵盤必須用於獲取兩者之間的值。 – 2012-04-09 12:05:04

你可以請檢查這個小提琴[鏈接] http://jsfiddle.net/aniprasanth/aTaA8/4/。你可以看到，當我們用鼠標移動滑塊時，數值從0跳到11,11到21就像那樣。即使步長值是1. – 2012-04-09 12:42:43

您不需要使用Javascript來控制滑塊，但您確實需要從Javacript獲得一些幫助來聚焦滑塊元素。如果用戶標籤到元素，它將工作，沒有任何Javascript。

E.g.

<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>

對於多個滑塊，您可以在<script>標籤內執行此操作。你不需要任何代碼在個別滑塊：

<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>

來源

2012-04-09 12:02:35

這一個完美的單一範圍滑塊，但我有多個滑塊，所以我只是嘗試用這個http://jsfiddle.net/aTaA8/6/，但它需要雙擊獲得專注。 – 2012-04-10 05:30:06

不再需要在HTML中的'onClick'中放入東西，所以將它全部作爲腳本來做是更好的做法。理想情況下，腳本將是外部的，而不是在我的答案中顯示的HTML頁面內。 – 2012-04-10 05:42:18

此外，'addEventListener（'click' ...與HTML'onclick =「'做的等價物，除了使用'addEventListener'外，還可以將多個函數附加到單個事件。 – 2012-04-10 05:44:04

也許你需要這樣的事情： example in jsfiddle。使用鼠標可以正常移動滑塊，但是如果單擊該按鈕，您將使用箭頭進行精確移動，但如果再次單擊，則會移除該監聽器，並且箭頭不起作用。

來源

2012-04-09 11:42:05 MiguelSanchezGonzalez

如何使用鍵盤箭頭鍵移動html5範圍滑塊手柄

回答

相關問題