如何使用javascript限制用户在文本框中仅输入2位数（一天中的小时数）

如何使用javascript限制用户在文本框中仅输入2位数（一天中的小时数）

---

在一天中只有24小时，因此用户只能输入数字1到24。

详细信息：以下文本框中只允许2位数字，而onkeypress只允许用户输入数字值

文本框

<input id="txtHours" type="text" maxlength="2" 
  onkeypress="if(event.keyCode<48 ||     event.keyCode>57)event.returnValue=false;" 
  onkeyup="validation(event.keyCode)" onpaste="return false" />

Javascript验证函数

  function validation(keyCode)
  {
        var Hours = document.getElementById("txtHours").value;

        if (Hours < 0 || Hours > 24)
            alert("Must enter a time between 0-24 hours");           
 }

功能验证（keyCode）
{
var Hours=document.getElementById（“txtHours”）.value；
如果（小时<0 | |小时>24）
警报（“必须输入0-24小时之间的时间”）；
}

也许要避免使用javascript而使用HTML：

<input id="my_id" type="text" name="your_text_field" maxlength="10">

关于在文本框中要求数字，有两种方法，建议使用内联javascript或单独的函数：

var input = document.getElementById('my_id');
input.onkeydown = function(e) {
    var k = e.which;
    /* numeric inputs can come from the keypad or the numeric row at the top */
    if ( (k < 48 || k > 57) && (k < 96 || k > 105)) {
        e.preventDefault();
        return false;
    }
};

var input=document.getElementById（'my_id'）；
input.onkeydown=功能（e）{
var k=e，其中；
/*数字输入可以来自键盘或顶部的数字行*/
如果（（k<48|k>57）和（k<96|k>105））{
e、 预防默认值（）；
返回false；
}
};

---

你可以在这里看到这个函数和其他函数：

我想你指的是输入。您可以使用jquery插件“掩码输入”，它重量轻且有用

---

为文本框使用一个属性maxlength=2。

如果您使用的是HTML5，那么这就可以了

<input type="number" name="quantity" min="1" max="24">

---

或者，您可以通过按键事件执行某些条件

对于简短易读且能在（几乎）所有浏览器中使用的简单代码，我建议使用jQuery mask插件

看起来是这样的

   $('.txtBox').mask("99");

这将限制为2位数字，并且不允许用户输入除0-9以外的任何内容，除非您自己捕获每一次按键和按键

下载

设置最大长度的问题是用户可以输入字母或其他任何内容，HTML5的问题是很多人都使用旧浏览器

编辑：如果你真的想阻止用户输入除0-24之外的任何内容，那么我建议在所有可用选项的位置进行下拉选择

除此之外，最简单的方法就是验证blur（）上的文本框并检查它是否低于24

---

如果你不想做这两件事，那么你需要编写一个定制的处理程序来捕捉按键，这将是非常复杂的——因为你可以输入“9”，但是如果输入了“9”，你就不能输入另一个数字，但是如果你输入了“0”、“1”或“2”，那么就可以输入另一个数字。您还必须担心复制和粘贴。不要把这变成一个大麻烦，只要使用一个选择下拉列表。或者在用户输入他们要输入的内容后验证文本框。仅屏蔽数字应有助于用户理解文本框中的内容。

我找到了解决方案

HTML

<input name="txthours" type="text" id="txthours" maxlength="2"/>

  <span id="Errormessage"></span>

JQUERY

 $('#txthours').bind('input', function() {

      $(this).val($(this).val().replace(/[A-Za-z]/g,''))

 var Hours =$("#txthours").val();

    if (Hours < 1 || Hours > 24)

    { 
      $(this).val($(this).val().replace(/[^A-Za-z]/g,''))

      $('#Errormessage').html('Must enter a time between 0-24 hours');                
    }});

$（'#txthours'）.bind（'input'，function（）{
$（this.val（$（this.val（）.replace（/[A-Za-z]/g'））
var Hours=$（“#txthours”）.val（）；
如果（小时数<1 | |小时数>24）
{ 
$（this.val（$（this.val（）.replace（/[^A-Za-z]/g'））
$（'#Errormessage'）.html（'必须输入0-24小时之间的时间'）；
}});

---

您可以设置一个关键的侦听器。下次在发布问题之前，请四处看看，您可能会发现问题已经得到了回答。您尝试过什么？使用Google，自己尝试一些东西，然后发布代码。@nhahtdh-注意，如果您可以不使用键盘粘贴文本，那么按键侦听器只能完成一半的工作……请注意，按键事件处理程序是不够的，因为用户可以不使用键盘粘贴文本。另外，考虑到这个问题上的jQuery标记，我建议将事件处理程序附加到jQuery上，这样

which

和

preventDefault（）

将被规范化，以便在本机不支持它们的浏览器中使用。这当然是公平的，但我不确定OP是否使用了jQuery，所以我没有使用这个函数，

.mask（“99”）

的问题是OP想要将最大值限制为

24

。

 $('#txthours').bind('input', function() {

      $(this).val($(this).val().replace(/[A-Za-z]/g,''))

 var Hours =$("#txthours").val();

    if (Hours < 1 || Hours > 24)

    { 
      $(this).val($(this).val().replace(/[^A-Za-z]/g,''))

      $('#Errormessage').html('Must enter a time between 0-24 hours');                
    }});