自定義數字微調Bootstrap jQuery

Question

我需要一個數字輸入，右邊的向上箭頭可以選擇一個數字。但是，該步驟根據值而變化，並將值舍入到不同的位置（您可以在示例中看到小提琴）。

現在我試圖3種不同的方法來這樣：

引導 - 類型=「數字」 =首選方法

我試圖舍入和步驟的變化，但沒有成功。如果我只使用updown按鈕，它可以工作，但是如果我輸入2000000作爲示例，則表明它是無效的。而且，這在Firefox中不起作用。當研究這個問題，我就翻過Modernizr的但不知道該如何實現它（會考慮這更一度面臨的首要問題是解決）

jQuery UI的微調

無法真正得到四捨五入以及與Bootstrap嘗試一樣工作的步驟。另外，樣式衝突所以需要CSS修改。

定製嘗試

我已經嘗試如圖所示撥弄我自己的方法。我仍然需要添加按鈕點擊的功能。出於某種原因，無法使用span12填充容器div。

My (failed) results so far: http://jsfiddle.net/rZyZW/ 

我可能已經忽略了一個簡單的方法，或者是在錯誤的方向與此，希望有人可以幫助！

編輯*

看看下面@ rbaker86的響應，極大的解決了我的問題與圓和不斷變化的步驟。

只需要得到它與Firefox一起工作！

Answer 1

您的代碼沒問題。它只是需要整理範圍。另外請注意，我只使用了一個jQuery選擇器。

試試這個：http://jsfiddle.net/rZyZW/1/

$("#test").change(function(){ 
    $self = $(this); 
    var val = $self.val(); 

    if(val < 200){ 
     $self.prop('step','50'); 
     $self.val('200'); 
    }else if(val < 1000){ 
     $self.prop('step','50'); 
     $self.val(Math.round(val/50)*50); 
    }else if(val > 1000 & val < 10000){ 
     $self.prop('step','100'); 
     $self.val(Math.round(val/100)*100); 
    }else if(val > 10000 & val < 50000){ 
     $self.prop('step','250'); 
     $self.val(Math.round(val/250)*250); 
    }else if(val > 50000 & val < 100000){ 
     $self.prop('step','500'); 
     $self.val(Math.round(val/500)*500); 
    }else if(val > 100000){ 
     $self.prop('step','1000'); 
     $self.val(Math.round(val/1000)*1000); 
    } 
    return false; 
});