SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Evangelist
    Join Date
    Mar 2006
    Location
    Sweden
    Posts
    451
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Only allow numbers in input

    Hi,
    I'm trying to make it impossible (well, sure, you could turn off js, but anyway) to type in anything but numbers in an input.

    I started with on keyup removing anything that is not 0-9, and that worked, but the problem is that the letter you type in shows for a milisecond or so, and I don't want that.

    So I tried to prevent the default action, so nothing would be entered in the input unless I say so, using the event object to detect which key was pressed and then inserting it into the input if it was 0-9. Also worked, but it breaks if I were to press the arrows to add a number in the beginning, because I just append the number at the end of the input value.

    Is there a way to do this?

  2. #2
    SitePoint Addict jtrelfa's Avatar
    Join Date
    Oct 2004
    Location
    Troy, Mi
    Posts
    231
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by wysiwyg View Post
    I started with on keyup removing anything that is not 0-9, and that worked, but the problem is that the letter you type in shows for a milisecond or so, and I don't want that.
    Seems like overkill to worry about that millisecond - the keyup method is what I've typically used and it's worked fine.

    If you want to use a keypress method, you'll have to specify which specific keys are allowed to be pressed within the control (arrows, tab, delete, backspace, etc) to ensure you don't break existing functionality. This would require some sort of switch statement or array loop to check which key was pressed each time - which could delay more than a millisecond?
    var me = null;

  3. #3
    SitePoint Evangelist
    Join Date
    Mar 2006
    Location
    Sweden
    Posts
    451
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well, I would only define the keydown-event on the input, and the only keys I would have allow except 0-9 would be F5, Del, backspace and left and right arrows (perhaps 2-3 more), and that check did not take enough time for my eye to notice it. It works fine, the only problem I have is if the user presses the left arrow and wants to add a number at the start.

  4. #4
    SitePoint Addict jtrelfa's Avatar
    Join Date
    Oct 2004
    Location
    Troy, Mi
    Posts
    231
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    One thing I've used to troubleshoot this sort of thing is to use a debugger function (bear in mind, it's a kludge):
    HTML Code:
    <input type='text' onkeypress="capt(event)" />
    <div id="messages"></div>
    Code:
    function capt(evt) {
      var charCode = (evt.which) ? evt.which : evt.keyCode;
      document.getElementById("messages").innerHTML += "code=" + charCode + "<br />";
    }
    It's a good way to ensure that you're capturing all the codes you want to allow. Hope this helps.
    var me = null;

  5. #5
    SitePoint Evangelist
    Join Date
    Mar 2006
    Location
    Sweden
    Posts
    451
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I have something like that to, but that's not my problem. My problem is that if you type in:
    111111

    And then place the marker (is that the correct word btw?) so it looks like this:
    111|111

    and then you type 2, you'd expect the result to be:
    1112111

    but it will be:
    1111112

    because I don't know how to check where the marker is in the text, so the number you type in just gets appended to the value.

  6. #6
    SitePoint Addict jtrelfa's Avatar
    Join Date
    Oct 2004
    Location
    Troy, Mi
    Posts
    231
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That sounds like you're using your JS code to manipulate the text input rather than just return true or false. If the js was inline, it would be something like:
    HTML Code:
    <input onkeypress="return allowedKey(event);">
    Then it doesn't matter where the user types in something...the function should only check what key was pressed and return true or false. Then you don't have to constantly manipulate the .value property of the form control.
    var me = null;


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •