2012-07-23 68 views
-1

我想創建一個輸入字段,您可以點擊/觸摸,然後向上或向下移動以更改字段的值,直到您鬆開鼠標/手指。如何使用鼠標或觸摸更改數字輸入欄?

這應該適用於最近的瀏覽器以及Android和iPhone。

+0

我嘗試了jQuery UI滑塊,但它在iPhone上doesent工作。我想快速拍攝沒有一個大的用戶界面,我必須包括 – rubo77 2012-07-23 02:12:43

回答

2

這裏是一個快速簡便的方法來做到這一點

<!doctype html> 
<html> 
    <head> 
    <script type='text/javascript'> 
     var startY; 
     function loadJs(){ 
     document.getElementById("upDownInput").onmousedown = startMoveUpDown; 
     }  

     function startMoveUpDown(e){ 
     startY = e.clientY; 
     document.onmousemove = moveUpDown; 
     document.onmouseup = endMoveUpDown; 
     } 

     function moveUpDown(e){ 
     var input = document.getElementById("upDownInput"); 
     var moveChange = Math.ceil(e.clientY - startY);   
     input.value = moveChange; 
     } 

     function endMoveUpDown(){ 
     document.onmousemove = null; 
     } 
    </script> 
    </head> 

    <body onload='loadJs()'> 
    <input style='margin-top: 200px' value='0' type='number' id='upDownInput'/> 
    </body> 
</html> 
+0

一個工程,但它沒有在iphone上工作的鼠標移動,請參閱:http://spacetrace.de/js/ input_slider_test.html – rubo77 2012-07-23 02:08:41

+0

我相信Safari瀏覽器有一個像mozilla那樣的本機ontouch監聽器(moztouch),但我不確定,鼠標和觸摸事件足夠相似,它們對於大多數應用程序的行爲方式相同,但對於某些事情(特別是多點觸控)你需要一個明確的觸摸處理器。 – dano 2012-07-23 05:13:07

+0

^但是如果您熟悉javascript,您可以通過首先檢查它們,然後在所有其他操作失敗時默認爲鼠標事件,輕鬆地合併觸摸偵聽器 – dano 2012-07-23 05:14:15

0

您可能想結賬jQuery UI's slider以獲得可靠的跨瀏覽器滑塊。

+0

,一個工程,但它doesen't在iPhone上工作 – rubo77 2012-07-23 02:10:49

+0

[jQuery手機的滑塊](http://jquerymobile.com/demos/1.1.1/文件/表格/滑塊/ index.html的)?這應該工作 – theabraham 2012-07-23 16:22:28

+0

不,doesen't做的伎倆;)我需要在沒有額外的空間 – rubo77 2012-07-24 15:46:25

相關問題