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

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

仅输入两位数字的步骤

数字不应超过12的值，因此他可以输入从0到12的数字，例如；8,11,6.5

我该怎么做？

以下是我到目前为止所做的。 HTML代码：

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

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

JQuery代码：

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

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

$（函数（）{
$（“.txt”）.on（“按键”，函数（）{
如果（$（“.txt”）.val（）.length>2）
{
this.value=parseFloat（this.value）.toFixed（2）；
}
});
});

---

您可以使用jQuery删除不需要的关键字符，然后检查该值是否大于12。第一个事件是

keydown

，以查看是否允许按下字符。我为

keyup

添加了另一个事件，因为在“keyup”之后才注册该值

$（.txt.input sm”）.keydown（函数（事件）{
//防止使用带数字的shift
if（event.shiftKey==true）{
event.preventDefault（）；
}
如果（！（（event.keyCode==190）| |（event.keyCode>=48&&event.keyCode=96&&event.keyCode 12）{
$（此）.val（“”）；
}
});

更新

这是很棘手的，因为小数点，但你可以做一些事情，如使用计数器来跟踪点击

---

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

$（.txt”）.on（“键控”，函数（事件）{
//不处理backspace、delete、pgup/pgdn、home/end或箭头键：
如果（event.keyCode==8 | | event.keyCode==46 | | event.keyCode>=33&&event.keyCode 1）
{
shift（）；
deplaces=件。连接（“”）。替换（“”-“”）；
}
//大于12.00的句柄数…：
如果（parseInt（整数）>12 | | parseInt（整数）==12&&parseInt（deplaces）>0）
{
整数=“12”；
decPlaces=getZeroedDecPlaces（decPlaces）；
警报（“编号必须介于0.00和12.00之间”）；
}//…且小于0:
else if（parseInt（整数）<0）
{
整数=“0”；
decPlaces=getZeroedDecPlaces（decPlaces）；
警报（“编号必须介于0.00和12.00之间”）；
}
//处理两位以上的小数：
如果（deplaces.length>2）
{
deplaces=deplaces.substr（0,2）；
警报（“数字的小数位数不能超过两位”）；
}
var newVal=hasDecPlace？整数+'.+deplaces:整数；
$（currentEl）.val（newVal）；
});
函数getZeroedDecPlaces（decPlaces）{
如果（deplaces==''）返回“”；
else if（deplaces.length==1）返回“0”；
否则如果（deplaces.length>=2）返回“00”；
}

--首先，处理

keyup

事件——直到

keypress

或

keydown

--不要处理某些键（

返回false

）。您可以在此列表中添加更多

--接下来，一种非正统的方法，将数字作为字符串处理：如果您确实不想使用

标记，请使用正则表达式从“数字”中删除字母和其他垃圾

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

--现在，通过解析整数（如果

数字===12

），处理大于12.00或小于0.00的数字。我使用了一个函数（

getZeroedDecimalPlaces

）来避免在用户字符串中添加额外的零或删除数字

--接下来限制小数位数。我不知道你是否想要这个。我将它限制为小数点后两位，但可以设置为任何值

--最后，重构字符串并将其粘贴到输入中

---

这里没有一个答案是理想的。以下是我的解决方案：

$（函数（）{
$（文档）.on（'input'，'.spinner'，function（）{
var Allowedigits=2；
var length=$（this）.val（）.length；
var max=parseInt（$（this.attr（“max”））；
//最新版本的Chrome中似乎存在错误。当有多个小数时，
//无法再访问数字类型字段的值。现在，我们所能做的就是清除它
//当这种情况发生时
if（$（this）.val（）==“”）{
$（此）.val（“”）；
}
if（$（this.val（）.indexOf（'.'）！=-1）{
Allowedigits=3；
}
如果（长度>允许长度）{
$（this.val（$（this.val（）.substring（1））；
}
if（$（this）.val（）>max&&max>0）{
$（this.val（$（this.val（）.substring（1））；
}
});  
})；

所以您想要0到12之间的数字，但是中间的数字呢？您想对小数位数进行一些限制吗？您需要添加step属性来处理浮点数，如

6.5

非常感谢您的帮助。但是，我需要您在以下方面的帮助：当用户尝试输入第三位数字时，我希望系统将阻止他输入该数字（保留他输入的其他两个数字）并向他显示有意义的消息。我如何在您的代码中做到这一点？

$(".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';
}