3

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

现在我尝试了 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 一起工作！

4

1 回答 1

2

你的代码没问题。它只需要整理范围。另请注意，我只使用了一个 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;
});
于 2013-07-03T15:27:13.597 回答