自定义数字微调器引导 jQuery

Question

我需要一个带有右侧向上箭头的数字输入来选择一个数字。但是，步长会根据值而变化，并且值会四舍五入到不同的位置（您可以查看示例中的 fiddle）。

现在我尝试了 3 种不同的方法：

Bootstrap - type="number" = 首选方法

我尝试了舍入和步进更改，但未成功。如果我只使用 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;
});