Question

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

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

Answer 1

详细信息：以下内容仅允许文本框中的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");           
 }

Answer 2

也许避免使用JavaScript并使用HTML：

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

在此处进一步了解：http://www.w3schools.com/tags/att_input_maxlength.asp

如果你需要使用javascript（就像以后添加的HTML或奇怪的东西）：

$("#my_id").attr("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;
    }
};

您可以在此处查看此功能及其他功能：Allow only numeric value in textbox using Javascript

Answer 3

我认为你的意思是输入。你可以使用jquery插件'mask input'，它重量轻，实用。

http://digitalbush.com/projects/masked-input-plugin/

Answer 4

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

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

或者你可以通过按键事件做一些条件。

Answer 5

为您的文本框使用 maxlength = 2 属性。

Answer 6

对于简短的代码，它简短易读，可以在（几乎）所有浏览器中工作，我建议使用jQuery mask plugin。

看起来像这样

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

这将限制为2位数，并且不会让用户输入除0-9之外的任何内容，而不会自己捕捉每个按键和键盘

下载From Here

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

编辑：如果你想真正阻止用户输入0到24之外的任何内容，那么我建议选择下拉选项，其中包含所有可用选项。

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

如果你不想做其中任何一个，那么你需要编写一个自定义处理程序来捕获将要非常复杂的keypress - 因为你可以输入“9”但是你不能输入另一个如果键入“9”，则为数字，但如果键入“0”，“1”或“2”，则允许另一个数字。您还必须担心复制和粘贴。而不是将其变成一个令人头痛的问题，只需使用选择下拉菜单。或者在用户输入他们要输入的内容后验证文本框。仅屏蔽数字应该有助于用户理解文本框中应该包含的内容。

Answer 7

我找到了解决方案

<强> 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');                
    }});

LIVE DEMO

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

7 个答案: