Fairly Realistic

Using JavaScript to limit which characters can be typed into an HTML input field is very easy. Let’s say you have a field that should only accept numbers in an HTML form. Simply attach an onkeydown event to the <input> element that checks for which key is being pressed. If the key is not valid then the function returns false and the character will not be printed.

<br /> function enforceNumbersOnly(evt)<br /> {<br /> // Get the keycode from IE or Mozilla<br /> var keyCode = evt == null ? event.keyCode : evt.which;</p> <p> document.getElementById(”code”).innerHTML = keyCode;</p> <p> // Any number or a backspace/delete/tab<br /> return (keyCode > 47 && keyCode 36 && keyCode 95 && keyCode<br /> </p> <ol> <li>The numbers zero through nine at the top of the keyboard are key codes 48 through 57.</li> <li>The numbers zero through nine on the keypad are key codes 96 through 105.</li> <li>Backspace has a key code of 8.</li> <li>The delete key has a code of 46.</li> <li>Tab’s key code is 9.</li> <li>The arrow keys are codes 37 through 40.</li> </ol> </div> <p class="postinfo"><strong>Posted:</strong> January 26th, 2006 under <a href="http://fairlyrealistic.com/category/javascript/" title="View all posts in javascript" rel="category tag">javascript</a>.<br /> <a href="http://fairlyrealistic.com/2006/01/26/limit-html-text-field-to-numbers-only/#comments"><strong>Comments:</strong> none</a> </p> <div id="commentsection"> <h3>Write a comment</h3> <form action="http://fairlyrealistic.com/wp-comments-post.php" method="post" id="commentform"> <p><label for="author">Name:</label><br /> <input type="text" name="author" id="author" class="textarea" value="" size="28" tabindex="1" /><input type="hidden" name="comment_post_ID" value="159" /> <input type="hidden" name="redirect_to" value="/2006/01/26/limit-html-text-field-to-numbers-only/" /></p> <p><label for="email">E-mail:</label><br /><input type="text" name="email" id="email" value="" size="28" tabindex="2" /></p> <p><label for="url">Website:</label><br /><input type="text" name="url" id="url" value="" size="28" tabindex="3" /></p> <p><label for="comment">Your comment:</label><br /> <textarea name="comment" id="comment" cols="66" rows="7" tabindex="4">