jQuery输入数字微调器

jQuery input number spinner

本文关键字：数字 输入 jQuery      更新时间：2023-09-26

我有jQuery微调器上下编号的代码：

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

这是有效的，但我需要添加两个选项：

  • 阻止用户在输入中添加数字
  • 设置数字的最大值和最小值

如何添加此选项？！

演示FIDDLE

更改：

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

要用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);
        }
    });
});

我没有检查过，但应该很准确

工作Fiddle：http://jsfiddle.net/7jtLa3py/3/

更好的方法：

  • 引导旋转器DEMO
  • jQuery Spinner
  • jQueryUI微调器

bootstrap狙击操作简单：

HTML

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

Javascript

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

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

使用此功能，您可以动态添加任意数量的跨浏览器兼容的微调器（甚至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');
相关文章：