---


       <input type="text" id="phone" name="phone" size="25" onkeyup="
        var validChars = '1234567890-ext';
        var phonenum = $('phone').getProperty('value');
        var cleanone = '';
        for(i=0; i<phonenum.length; i++) { 
          c = phonenum.charAt(i);
          if (validChars.indexOf(c) !== -1) cleanone += c;
        };
        $('phone').setProperty('value',cleanone);
        ">


Sweet! A quick inline way to use MooTools in an inline check.

Note that the validChars string can be altered to include or exclude whatever characters you wish to allow or disallow. In this case, I still wanted users to be able to enter an extension.

You'll want to especially familiarize yourself with getProperty and setProperty from the version 1.11 MooTools documentation.

Here is another version that uses a MooTools addevent to listen, and in this case only allows numerical characters. This particular example comes from a donation form where non-numerical characters cause errors in the other javascript calculations on the page.

The HTML:

  Donation Amount:<br/>
  $<input type="text" id="donation" name="donation" value="35"/>


The JavaScript:

  $('donation').addEvent('keypress',function() {
    var validChars = '1234567890';
    var donation = this.getProperty('value');
    var cleanone = '';
    for(i=0; i<donation.length; i++) {
      c = donation.charAt(i);
      if (validChars.indexOf(c) !== -1) cleanone += c;
    };
    this.setProperty('value',cleanone)
  }


This version allows you the opportunity to put your javascript external to the page (to increase your text-to-code ratio for search engine optimization purposes).

Last Updated: 2008-10-01 17:54:16