Question

我是JQuery世界的新手，我正在尝试限制我正在处理的网页中某些文本字段输入中的位数。我想允许用户：

仅输入两位数字
该数字不应超过12的值，因此他可以输入0到12之间的数字，如; 8,11,6.5

我该怎么做？

这是我到目前为止所做的事情。 HTML代码：

<input type="text" class="txt input-sm" />
<input type="text" class="txt input-sm" />

JQuery代码：

<script>
            $(function(){
                $(".txt").on("keypress", function(){
                    if($(".txt").val().length > 2)
                    {
                        this.value = parseFloat(this.value).toFixed(2);
                    }
                });
            });
    </script>

Answer 1

您可以使用jQuery删除不需要的关键字符，然后检查该值是否大于12.第一个事件是keydown，以查看是否允许按下该字符。我为keyup添加了另一个事件，因为直到“keyup”之后才会注册该值

$(".txt.input-sm").keydown(function (event) {

    //prevent using shift with numbers
    if (event.shiftKey == true) {
        event.preventDefault();
    }

    if (!((event.keyCode == 190) || (event.keyCode >= 48 && event.keyCode <= 57) || (event.keyCode >= 96 && event.keyCode <= 105) || event.keyCode == 8 || event.keyCode == 9 || event.keyCode == 37 || event.keyCode == 39 || event.keyCode == 46)) {
        //not a number key or period so prevent
        event.preventDefault();
    }
});

$(".txt.input-sm").keyup(function (event) {

    var number = parseFloat($(this).val());
    if(number > 12){
       $(this).val("");
    }
});

FIDDLE

<强>更新

由于小数，这很棘手，但您可以使用计数器来跟踪点击次数。

NEW FIDDLE

Answer 2

<input type="number" min="0" max="12">

Answer 3

所以我实际上两天前完成了这个问题的解决方案，但是在我发布答案之前我不得不离开。如果您仍然需要帮助，可以在这里查看，但它可能有比您需要的更多功能 - 我很开心：）

$(".txt").on("keyup", function(event) {

    // don't handle backspace, delete, pgup/pgdn, home/end, or arrow keys:
    if (event.keyCode === 8 || event.keyCode === 46 || event.keyCode >= 33 && event.keyCode <= 40) return false;

    var currentEl = $(this);
    var value = $(currentEl).val();

    // remove letters...
    value = value.replace(/[^0-9.-]/g, "");

    var hasDecPlace = value.match(/\./);

    // separate integer from decimal places:
    var pieces = value.split('.');
    var integer = pieces[0].replace('-', '');
    var decPlaces = ""
    if (pieces.length > 1)
    {
        pieces.shift();
        decPlaces = pieces.join('').replace('-', '');
    }

    // handle numbers greater than 12.00... :
    if (parseInt(integer) > 12 || parseInt(integer) === 12 && parseInt(decPlaces) > 0)
    {
        integer = "12";
        decPlaces = getZeroedDecPlaces(decPlaces);
        alert("number must be between 0.00 and 12.00");
    } // ...and less than 0:
    else if (parseInt(integer) < 0)
    {
        integer = "0";
        decPlaces = getZeroedDecPlaces(decPlaces);
        alert("number must be between 0.00 and 12.00");
    }

    // handle more than two decimal places:
    if (decPlaces.length > 2)
    {
        decPlaces = decPlaces.substr(0, 2);
        alert("number cannot have more than two decimal places");
    }

    var newVal = hasDecPlace ? integer + '.' + decPlaces : integer;

    $(currentEl).val(newVal);
});

function getZeroedDecPlaces(decPlaces) {
    if (decPlaces === '') return '';
    else if (decPlaces.length === 1) return '0';
    else if (decPlaces.length >= 2) return '00';
}

- 首先，处理keyup事件 - 在keypress或keydown

之前，不会将值添加到输入中

- 不要处理某些密钥（return false）。您可以在此列表中添加更多内容。

- 接下来，一个非传统的方法，将数字作为字符串处理：如果你真的不想使用<input type="number" />标签，请使用正则表达式从字母中取出字母和其他垃圾＃34;数＆＃34;

- 现在，首先，确定是否有小数点，以便您可以重建＆＃34;数字＆＃34; （字符串）稍后。接下来，将整数与小数位分开。

- 现在通过解析整数（和小数位，如果number === 12）来处理大于12.00或小于0.00的数字。我使用了一个函数（getZeroedDecimalPlaces）来避免在用户的字符串中添加额外的零或从中移除数字。

- 下一个限制小数位数。我不知道你是否想要这个。我把它限制在两个小数位，但它可以设置为任何值。

- 最后，重建字符串并将其粘贴在输入

中

Here is the JSFiddle

Answer 4

这里的答案都不理想。这是我的解决方案：

$( function() {
  $(document).on('input', '.spinner', function() {
    
    var allowedDigits = 2;
    var length = $(this).val().length;
    var max = parseInt($(this).attr("max"));
    
    // appears there is a bug in the latest version of Chrome. When there are multiple decimals,
    // the value of a number type field can no longer be accessed. For now, all we can do is clear it
    // when that happens
    if($(this).val() == ""){
      $(this).val("");
    }
    
    if ($(this).val().indexOf('.') != -1) {
      allowedDigits = 3;
    }
   	
    if(length > allowedDigits){
      $(this).val($(this).val().substring(1));
 	}
    
    if($(this).val() > max && max > 0){
      $(this).val($(this).val().substring(1));
    }
  });  
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input class="spinner" type="number" min="0" value="00" max="12">

这将允许您输入任何2位数字和12位以下的数字，而不会中断。当数字太多时，它会从最左边的数字下降。

HTML文本输入仅允许两位数字输入

4 个答案: