allow only numbers in an input

Discussion in 'Javascript' started by PJ, Dec 19, 2005.

  1. PJ

    PJ Guest

    I've been using this function to limit a text input to numbers only with success on an old site.

    function checkForInt(evt) {
    var charCode = ( evt.which ) ? evt.which : event.keyCode;
    return ( charCode >= 48 && charCode <= 57 );
    }<input id="txt" type="text" onkeypress="return checkForInt(event)" />However, on a new site I am building, the text input not only disallows letters, it also doesn't allow tabbing to the next control, hitting return, backspace, delete, left/right arrow, etc. I obvioulsy want to allow these keys. The only difference between the two is that the new site is xhtml 1.0 transitional. Has anyone else experienced this?

    Also, what is the proper syntax to wire up an event like this without typing the event attribute in the markup itself?

    document.getElementById('txt').onkeypress = function(event) { return checkForInt(event); }

    ????
    Thanks,~PJ
     
    PJ, Dec 19, 2005
    #1
    1. Advertising

  2. PJ

    PJ Guest

    I need a filter on both sites. I have modified the function to the
    following now and it seems to work.

    function checkForInt(evt) {
    //notice that the check is != null now, as the tab key has a value of 0
    var charCode = ( evt.which != null ) ? evt.which : event.keyCode
    //charCodes < 32 include tab, delete, arrow keys, etc
    return (charCode < 32 || (charCode >= 48 && charCode <= 57))
    }

    However:
    document.getElementById("txt").onkeypress = checkForInt;
    does not work in Firefox as an argument needs to be passed in order to pass
    the event. How do you assign an event in code and pass arguments to it?

    Thanks
    ~PJ





    "Ian" <> wrote in message
    news:...
    > PJ wrote:
    > > I've been using this function to limit a text input to numbers only with
    > > success on an old site.
    > >
    > >
    > > function checkForInt(evt) {
    > > var charCode = ( evt.which ) ? evt.which : event.keyCode;
    > > return ( charCode >= 48 && charCode <= 57 );
    > > }
    > >
    > > <input id="txt" type="text" onkeypress="return checkForInt(event)" />
    > >
    > > However, on a new site I am building, the text input not only disallows
    > > letters, it also doesn't allow tabbing to the next control, hitting
    > > return, backspace, delete, left/right arrow, etc. I obvioulsy want to
    > > allow these keys. The only difference between the two is that the new
    > > site is xhtml 1.0 transitional. Has anyone else experienced this?
    > >

    > Are you saying there is an existing filter, or you are required to add

    one?
    >
    > > Also, what is the proper syntax to wire up an event like this without
    > > typing the event attribute in the markup itself?
    > >
    > > document.getElementById('txt').onkeypress = function(event) { return
    > > checkForInt(event); }
    > >

    > Or
    >
    > document.getElementById("txt").onkeypress = checkForInt;
    >
    > I tend to favour this in an onload handler to putting stuff in the
    > markup. No point in cluttering up the XHTML with stuff that would be
    > ignored if the user disabled JavaScript!
    >
    > Ian
     
    PJ, Dec 19, 2005
    #2
    1. Advertising

  3. PJ

    PJ Guest

    Ok, the reason it wasn't working for me is I had accidently left the
    attribute for the event on while testing. That last function I used was no
    good in IE as it throws an error that evt.which is null or not an object, as
    evt itself is null in IE. The latest iteration I have is:

    function checkForInt(evt) {
    evt = ( evt ) ? evt : window.event;
    var charCode = ( evt.which ) ? evt.which : evt.keyCode
    return (charCode <= 31 || (charCode >= 48 && charCode <= 57))
    }

    Come to think of it, it should be titled "checkForPosInt", but oh well...

    As for wiring events, I like to take the seperation a bit further and use
    Ben Nolan's Behaviour file. I've found this rather nifty way that uses css
    selectors. http://bennolan.com/behaviour/

    var gameRules = {
    '#txt' : function(element) {
    element.onkeypress = checkForInt;
    } ,
    Behaviour.register(gameRules);

    Thanks again Ian
    ~PJ



    "Ian" <> wrote in message
    news:...
    > PJ wrote:
    > > I need a filter on both sites. I have modified the function to the
    > > following now and it seems to work.
    > >
    > > function checkForInt(evt) {
    > > //notice that the check is != null now, as the tab key has a value

    of 0
    > > var charCode = ( evt.which != null ) ? evt.which : event.keyCode
    > > //charCodes < 32 include tab, delete, arrow keys, etc
    > > return (charCode < 32 || (charCode >= 48 && charCode <= 57))
    > > }
    > >
    > > However:
    > > document.getElementById("txt").onkeypress = checkForInt;
    > > does not work in Firefox as an argument needs to be passed in order to

    pass
    > > the event. How do you assign an event in code and pass arguments to it?
    > >

    > It does.
    >
    > The event is automatically passed to the function as its one and only
    > parameter.
    >
    > In IE, you have to get the event form the window (window.event).
    >
    > Ian
     
    PJ, Dec 20, 2005
    #3
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Eric Lilja
    Replies:
    1
    Views:
    593
    Rapscallion
    Jun 4, 2005
  2. Jeff
    Replies:
    2
    Views:
    959
    clintonG
    Sep 19, 2006
  3. Ryan Taylor
    Replies:
    1
    Views:
    693
    Ryan Taylor
    Sep 9, 2004
  4. Leroy

    Capture Key, only allow numbers

    Leroy, Oct 1, 2004, in forum: Javascript
    Replies:
    8
    Views:
    90
    Randy Webb
    Oct 18, 2004
  5. eli m
    Replies:
    12
    Views:
    316
    Jorgen Grahn
    Mar 12, 2013
Loading...

Share This Page