jQuery, autoNumeric() and id's that contain special characters

jQuery, autoNumeric() and id's that contain special characters

The proper syntax for input ID and NAME tokens must begin with a letter ([A-Za-z]) and may be followed by any number of letters, digits ([0-9]), hyphens ("-"), underscores ("_"), colons (":"), and periods ("."). From http://www.w3.org/TR/html4/types.html

Unfortunately jQuery has some issues with colons(:) and periods(.) and these characters need to be escaped. There are multiple ways to accomplish this. Given the following id="id.name" here are three ways;

Escaped the period with double backslashes $('#id\\.name').
Use the document.getElementById( id ) $( document.getElementById( id ) ) - thanks Evan C.
You can also use the below routine in this manner $( fixId( id ) ). http://docs.jquery.com/Frequently_Asked_Questions

     function fixId(myid) { // replaces special characters in id name 
        myid = myid.replace(/\[/g, "\\[").replace(/\]/g, "\\]");
        return '#' + myid.replace(/(:|\.)/g,'\\$1');    
     } // autoNumeric also requires brackets to be escaped

I have modified autoNumeric as of version 1.5.3 to handle special characters internally and with the strip and format functions. Please remember jQuery functions that use the id selector with special characters still needs to be escaped see below.

Back to the main page


Type in the first group of input fields. Each of the below input fields uses a special character.

id="foo.bar" (period)
id="foo:bar" (colon)
id="foo[bar]" (bracket)
id="foo-bar" (hyphen)
id="foo_bar" (underscore)

Striped results from above on the blur event using the $.fn.autoNumeric.Strip(id) function note: the id on the strip function does not need to be escaped or require the # sign. Remember you still need to escape jQuery functions $('#foo\\.bar').val($.fn.autoNumeric.Strip(id));

period
colon
bracket
hyphen
underscore

Below are the re-formatted results from the strip function using the $.fn.autoNumeric.Format(id, value) function. note: the id on the format function does not need to be escaped or require the # sign. Again remember you still need to escape jQuery functions $('#foo\\.bar').val($.fn.autoNumeric.Format(id, value));

period
colon
bracket
hyphen
underscore

Back to the main page

Please contact me is you have any questions, comments and or suggestions at bob{@}decorplanit.com (remove brackets)