SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Member
    Join Date
    Dec 2006
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    How to create an event listener?

    Hello,

    How do I add an event listener to a few text boxes that prevents the user from typing anything but digits. I use the numbers entered in the text boxes in calculations afterwards so I don't want the user to enter "one" instead of "1" etc... Also, the range of possible numbers is too big for a drop down menu.

    Please help :-)

    Thanks!

    Julie

  2. #2
    Caveat surfer Buddy Bradley's Avatar
    Join Date
    May 2003
    Location
    Cambridge, UK
    Posts
    2,366
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
    my_input.onkeyup = function () {
    	this.value = this.value.replace(/\D/g,'');
    }

  3. #3
    SitePoint Zealot
    Join Date
    Jul 2006
    Posts
    151
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Event Listener

    What I would do is use the 'onblur' event of the textbox, and then validate for a numeric response there.

    So for instance:

    HTML Code:
    <input type="text" size="10" onblur="checkNumeric(this)" />
    and use the following Javascript in your head.

    Code:
    function checkNumeric(el) {
          if (!el.value) {
               alert("You must enter a value");
               el.focus();
               return false;
          }
          if (parseInt(el.value)==el.value) return true;
          alert("You must enter a numeric value");
          el.focus();
          return false;
    }

  4. #4
    SitePoint Member
    Join Date
    Dec 2006
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks to both of you for your suggestions. I will try both... First of all, for this one:

    Quote Originally Posted by Buddy Bradley View Post
    Code:
    my_input.onkeyup = function () {
    	this.value = this.value.replace(/\D/g,'');
    }
    I assume I place the above code in my js file. Now what do I need to add in my text input line to call the above code in my js file?:

    Code:
    <input name="txtTest" type="text" id="txtTest" size="4" maxlength="4" tabindex="1">
    I know how to call a function from a input field to validate if text has been entered but I'm not familiar with the way the above code is written. Also, what does this code (/\D/g,''); mean? A more detailed explaination would be greatly appreciated!

    Thanks for your help!

    Julie

  5. #5
    SitePoint Zealot
    Join Date
    Jul 2006
    Posts
    151
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Looks like to me that you won't need to add anything, just change my_input to txtTest.

    Dave

  6. #6
    Caveat surfer Buddy Bradley's Avatar
    Join Date
    May 2003
    Location
    Cambridge, UK
    Posts
    2,366
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by JulieCanada2 View Post
    I assume I place the above code in my js file. Now what do I need to add in my text input line to call the above code in my js file?
    Code:
    <input name="txtTest" type="text" id="txtTest" size="4" maxlength="4" tabindex="1">
    
    <script type="text/javascript">
    document.getElementById('txtTest').onkeyup = function () {
    	this.value = this.value.replace(/\D/g,'');
    }
    </script>
    Quote Originally Posted by JulieCanada2 View Post
    Also, what does this code (/\D/g,''); mean? A more detailed explaination would be greatly appreciated!
    It is a regular expression - the forward-slashes are the delimiters, the \D means 'match any non-numeric character', and the 'g' at the end means global, as in do it as many times as is needed. It is replacing all non-numeric characters in the string with a blank - i.e. deleting them.

  7. #7
    SitePoint Member
    Join Date
    Dec 2006
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It works! Thanks a lot!

    Have a great day!

    Julie


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
  •