0

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

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

4

7 回答 7

4

详细信息：以下将仅允许文本框中的 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");           
 }
于 2012-11-21T05:10:01.873 回答
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

于 2012-11-21T05:10:16.230 回答
2

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

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

于 2012-11-21T05:10:55.773 回答
2

如果您使用的是 HTML5，那么这可以解决问题

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

否则你可以通过按键事件做一些条件。

于 2012-11-21T05:14:45.653 回答
0

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

于 2012-11-21T05:10:57.500 回答
0

对于简短易读并且可以在（几乎）所有浏览器中工作的简单代码，我会推荐 jQuery mask plugin 。

它看起来像这样

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

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

从这里下载

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

编辑： 如果您想真正阻止用户输入除 0-24 以外的任何内容，那么我建议您在下拉列表中选择所有可用选项的位置。

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

如果您不想执行其中任何一项，那么您需要编写一个自定义处理程序来捕获非常复杂的按键 - 因为您可以输入“9”，但如果“ 9" 被键入，但如果您键入 "0"、"1" 或 "2"，则允许另一个数字。您还必须担心复制和粘贴。与其把它变成一个大麻烦，只需使用一个选择下拉菜单。或者在用户输入他们要输入的任何内容后验证文本框。只屏蔽数字应该有助于用户理解文本框中的内容。

于 2012-11-21T05:22:30.333 回答
0

我找到了解决方案

HTML

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

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

查询

 $('#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');                
    }});

现场演示

于 2012-11-21T06:58:52.193 回答