?
Solved

Arrow keys in text input box

Posted on 2006-05-12
3
Medium Priority
?
271 Views
Last Modified: 2008-03-17
I created a text input box which is meant to accept number values only, and I thought it would be a good idea to use javascript to prevent users from typing in letters into the box, to save myself server-side validation.  The problem I've noticed is that with Firefox, when you limit the keyPress event by only allowing a certain range of values, Firefox takes this so seriously that you can't even use the arrow keys anymore.  IE however still lets you use the arrowkeys.  Unfortunately, there doesn't seem to be anyway to capture the arrow-key press, since it doesn't have an ascii value.  (Or maybe it's one of the control-values?)

Is there some way around this?  It would be very annoying to a firefox user to not be able to use the arrow keys in a text box.

Here's the function I use:

function processKey(ev) {
      var key = ev.keyCode || ev.which;
      if ( (key > 47 && key < 58) || (key == 46) ) return true; // allow only numbers or decimal point
      return false;
}
0
Comment
Question by:chsalvia
  • 2
3 Comments
 
LVL 29

Accepted Solution

by:
Pravin Asar earned 500 total points
ID: 16670599

function ValidateIntNumber(fld) {
     if (fld.value.match(/[^0-9]/))  
     {
         fld.value=fld.value.replace(/[^0-9]/g,'');
     }
}


<input type="text" onkeyup="ValidateIntNumber(this);">
0
 
LVL 4

Assisted Solution

by:FSIFM
FSIFM earned 500 total points
ID: 16671651
you use /\D/g This is a regular expression that matches any character that isn't a digit.

so it will do a check on every character including the arrow keys, to make sure it only contains digits.

function processKey(ev) {
     var key = ev.keyCode || ev.which;
     if ( (key != /\D/g) ) return true; // allow only numbers or decimal point
     return false;
}
0
 
LVL 4

Expert Comment

by:FSIFM
ID: 16671694
Sorry please ignore the above...

Place this into the input code. e.g.

<input type="text" onblur="this.value=this.value.replace(/\D/g,'');" onkeyup="this.onblur();" />
0

Featured Post

Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

I've been trying to accomplish this for a while and it just struck me yesterday how to accomplish this task. I have done searches all over the internet looking for ways to email pages from my applications and finally I have done it!!! Every single s…
Having worked on larger scale sites, we found out that you are bound to look at more scalable solutions to integrating widgets, code snippets or complete applications and mesh them into functional sites, in any given composition. To share some of…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

807 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question