Question

我有jQuery spinner上下编号的代码：

HTML：

<div class="container">
  <div class="input-group spinner">
    <input type="text" class="form-control" value="42">
    <div class="input-group-btn-vertical">
      <div class="btn btn-default"><i class="fa fa-caret-up"></i></div>
      <div class="btn btn-default"><i class="fa fa-caret-down"></i></div>
    </div>
  </div>
</div>

JS：

(function ($) {
  $('.spinner .btn:first-of-type').on('click', function() {
    $('.spinner input').val( parseInt($('.spinner input').val(), 10) + 1);
  });
  $('.spinner .btn:last-of-type').on('click', function() {
    $('.spinner input').val( parseInt($('.spinner input').val(), 10) - 1);
  });
})(jQuery);

这项工作但我需要添加两个选项：

阻止用户添加号码进行输入
设置数字的最大值和最小值

如何添加此选项？！

DEMO FIDDLE

Answer 1

变化：

<input type="text" class="form-control" value="42">

要：

<input type="number" min="0" max="10" steps="1" class="form-control" value="5">

如果您希望用户能够更改价值，我对您的问题并不十分了解，如果您不希望他们更改价值，只需添加只读属性为输入字段，如下所示

<input type="number" min="0" max="10" steps="1" class="form-control" value="5" readonly>

Answer 2

使用我认为你想要的jQuery来完成所有这些：

$(document).ready(function(){
    //Stop people from typing
    $('.spinner input').keydown(function(e){
        e.preventDefault();
        return false;
    });
    var minNumber = 1;
    var maxNumber = 10;
    $('.spinner .btn:first-of-type').on('click', function() {
        if($('.spinner input').val() == maxNumber){
            return false;
        }else{
            $('.spinner input').val( parseInt($('.spinner input').val(), 10) + 1);
        }
    });

    $('.spinner .btn:last-of-type').on('click', function() {
        if($('.spinner input').val() == minNumber){
            return false;
        }else{
            $('.spinner input').val( parseInt($('.spinner input').val(), 10) - 1);
        }
    });
});

我还没有检查，但应该非常准确

工作小提琴：http://jsfiddle.net/7jtLa3py/3/

Answer 3

假设您必须将该数据发送回服务器，设置输入readonly属性并为输入值添加一些限制相当容易。这是演示 http://jsbin.com/yebawihune/7/

Answer 4

通过这种方式，您可以根据需要动态添加任意数量的跨浏览器兼容（甚至是IE）。当然，你必须为jquery包含所需的js和css文件。

首先，您必须创建输入。记下您的ID，稍后您将使用它。我总是在输入中为id和name参数添加相同的值。

<input id="elementName" name="elementName">

然后把它放在你的头部。

    function createSpinner(elemName, elemVal, elemMin, elemMax, elemStep){
        var mySpinner = $( '#' + elemName ).spinner({
            min: elemMin,
            max: elemMax,
            step: elemStep,
            change: function( event, ui ) {
                var typedVal = $( '#' + elemName ).spinner( 'value' );
                if (typedVal < elemMin || typedVal > elemMax) { 
                    alert('Value must be between ' + elemMin + ' and ' + elemMax);
                    $('#' + elemName).spinner('value', elemVal);
                }
            }
        });    
        $('#' + elemName).spinner('value', elemVal);
    };

然后你只需调用函数，传递所需的参数（第一个参数将是输入ID的值）。

createSpinner('elementName','0','0','10000','1');

Answer 5

更好的方法：

bootstrap snipper非常简单：

HTML

<input type="text" class="aSpinEdit" />

的Javascript

$('.aSpinEdit').spinedit({
    minimum: -10,
    maximum: 50,
    step: 1
});

jQuery输入数字微调器

5 个答案: