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

Question

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

1. 只能输入两位数
2. 数字不能超过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" /> 标签，请使用正则表达式从“数字”中取出字母和其他垃圾。

--现在，首先，确定是否有小数点，以便稍后重构“数字”（字符串）。接下来，将整数与小数位分开。

--现在通过解析整数（和小数位，如果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 位的任何数字。当数字太多时，它会丢弃最左边的数字。