How to restrict user to enter only 2digits only (hours in a day) in textbox using javascript

Question

How to restrict user to enter only 2digits only (hours in a day) in textbox using javascript.

in a day only 24 hours so user can enter only digit 1 to 24.

Answer 1

Details: The following will only allow 2 digits in the textbox while the onkeypress will only allow the user to enter a numeric value.

Textbox

<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 validation function

  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

Perhaps avoid javascript and use HTML:

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

Look further here: http://www.w3schools.com/tags/att_input_maxlength.asp

If you need to use javascript (like the HTML is added later or something odd):

$("#my_id").attr("maxLength", 10);

In regard to requiring digits in the textbox there are a couple of ways, as suggested inline javascript or a separate function is useful:

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;
    }
};

You can see this function and others here: Allow only numeric value in textbox using Javascript

Answer 3

I think you mean input. You can use jquery plugin 'mask input', it's light weight and usefull.

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

Answer 4

if you're using HTML5 then this would do the trick

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

or else you can do some condition via keypress events.

Answer 5

use an attribute maxlength=2 for your textbox.

Answer 6

for simple code that is short and readable and going to work in (almost) all browsers I would recommend jQuery mask plugin .

it would look like this

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

this will limit to 2 digits , and will not let the user enter anything other then 0-9 , without catching every keypress and keyup on your own

download From Here

the problem with just setting max length is that the user can enter letters or anything else, the problem with HTML5 answer is a lot of people have old browsers

EDIT : If you want to actually prevent the user from entering anything other then 0 - 24 , then I would suggest a dropdown select where the all available options are there .

Other then that, the simpilest way to accomplish what you want to do is just validate the textbox on blur() and check that it is below 24.

If you don't want to do either of those then you need to write a custom handler to catch keypress that is going to be pretty complicated - because you are allowed to type "9" but you are not allowed to type another digit if "9" was typed , but if you type "0", "1" , or "2" then another digit is allowed. You also have to worry about copy and paste. Instead of turning this into a big headache , just use a select dropdown. Or validate the textbox after the user enters whatever they are going to enter. Masking to only digits should help the user understand what should go in the text box .

Answer 7

I find out solution for that

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