javascript, limit number of characters in text field

Question

I have a form which allows only for numbers to be entered in the text box, or an alert appears:

<form name="formName" action="" method="post" OnSubmit="return chkSubmit();"> 
    Input Number 
    <input type="text" name="txtNumber" value="">
    <input type="submit" name="btnSubmit" value="Submit">
</form>

with the following javascript:

<script>
function chkSubmit()
{
     if(isNaN(document.formName.txtNumber.value))
     {
        alert('Please input numbers only.');
        return false;
     }
}</script>

How do I allow for only 4 characters to be entered? No alert, just prevent the user from typing more than 4 characters.

Restricting input like that is annoying for users. You only care that the field is valid when the form is submitted, whatever it contains before then is of no interest to you. — RobG
– RobG, Commented Oct 30, 2012 at 23:14

T.J. Crowder · Accepted Answer · 2013-03-13 17:30:28Z

5

input elements support a maxlength attribute, e.g.:

<input type="text" name="txtNumber" value="" maxlength="4">

...which is then enforced by the user agent (browser). You can also enforce it in your chkSubmit if you want a belt-and-braces approach, by checking the length of the value property, but it's been around forever and I doubt you'll find a user agent that doesn't handle it.

RobG's point (in a comment on the question) is well-taken, as well: Restricting users prior to form submission tends to be irritating for them. It may or may not be appropriate for your use-case, but at least consider not limiting them (but perhaps giving some visual feedback using the keypress event), and only validating length on submit, the way Stack Overflow does on comments.

edited Mar 13, 2013 at 17:30

answered Oct 30, 2012 at 23:11

T.J. Crowder

1.1m201 gold badges2k silver badges2k bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

nathan hayfield Over a year ago

as in <input type="text" name="whatever" maxlength="20">

Phil · Accepted Answer · 2012-10-30 23:15:54Z

1

Use maxlength

<form name="formName" action="" method="post" OnSubmit="return chkSubmit();"> 
    <input type="text" name="txtNumber" maxlength="4" value="" />
    <input type="submit" name="btnSubmit" value="Submit" />
</form>

answered Oct 30, 2012 at 23:15

Phil

4483 silver badges9 bronze badges

Collectives™ on Stack Overflow

javascript, limit number of characters in text field

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related