SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Evangelist dhtmlhelp's Avatar
    Join Date
    May 2003
    Posts
    575
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Block characters typing with javascript

    Hi,

    for added security I am trying to implement a javascript that stops users from inputting certain characters depending on the input field. I have done some research and as far as I understand I should be using regular expressions, is this correct?

    Could anyone post an example of a code, for example, for the name field, limiting the characters to letters only [a-z], for the password field only [a-z] and [0-9], and for the telephone number only [0-9].

    I will implement some value checking with php, I just wanted to add some extra security with javascript.

    Hope someone can give some brief examples.

    thanks,

    DH

  2. #2
    SitePoint Zealot tss68nl's Avatar
    Join Date
    Nov 2002
    Location
    Netherlands
    Posts
    165
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    <head>
     <title>Untitled</title>
     <style>
      BODY { font-family : MS Sans Serif; font-size : 8pt; background : #EEE; color : 777;}
      #about { width : 350px; border: 1px solid #000; background: #E2E3F5; padding: 5 10 10 7; color : 000; }
      #title { font-family : Verdana; font-weight : bold; font-size : 16pt; color : 000; border-bottom : 1px solid #000; padding : 5 0; font-variant : small-caps; letter-spacing : 10px; }
     </style>
     
     <script>
      function filterInput(e) {
       // Get the regular expression to test against for this particular object
       regAllow = (e)?eval(e.allow):eval(event.srcElement.allow);
       // Check for an allowed character, if not found, cancel the keypress's event bubbling
       if (!String.fromCharCode(event.keyCode).match(regAllow)) event.returnValue=false;
      }
     </script>
    </head>
    <body>
    
    <div id="title">Input Filtering</div>
    <br><br>
    Only normal characters allowed:<br>
    <input type="text" size="40" onKeyPress="filterInput(this)" allow="/[A-Za-z]/"><br>
    <br>
    Numbers and uppercase letters + spaces allowed (for zip codes):<br>
    <input type="text" size="40" onKeyPress="filterInput(this)" allow="/[A-Z0-9\s]/"><br>
    <br>
    Normal characters and spaces + interpunction allowed (sentences):<br>
    <input type="text" size="40" onKeyPress="filterInput(this)" allow="/[A-Za-z\s,.?!]/"><br>
    <br>
    
    </body>
    </html>
    Hope that helps. Works in IE 4+, and with a little adjustment in netscape as well, but you get the idea from the above I think.

  3. #3
    SitePoint Evangelist dhtmlhelp's Avatar
    Join Date
    May 2003
    Posts
    575
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Tss,

    fantastic.

    DH


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
  •