jQuery输入数字微调器

时间:2014-10-28 08:04:56

标签: javascript jquery

我有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

5 个答案:

答案 0 :(得分:3)

变化:

<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>

答案 1 :(得分:3)

使用我认为你想要的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/

答案 2 :(得分:1)

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

答案 3 :(得分:1)

通过这种方式,您可以根据需要动态添加任意数量的跨浏览器兼容(甚至是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');

答案 4 :(得分:0)

更好的方法:

bootstrap snipper非常简单:

HTML

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

的Javascript

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