Question

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

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

Bootstrap - type =“number” =首选方法

我尝试过舍入和步骤更改，但未成功。如果我只使用updown按钮，它可以工作，但如果我输入2000000作为示例，则表明它无效。此外，这在Firefox中不起作用。在研究这个问题时，我遇到了 Modernizr ，但不确定如何实现它（一旦主要问题得到解决，将会更多地研究这个问题）

jQuery UI Spinner

与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;
});

自定义数字Spinner Bootstrap jQuery

1 个答案: