javascript cross browser scripting help

Question

Hi Guys, I have a tiny function I use to only allow numeric input. It works great in IE, but I cannot get it to work in FireFox or Chrome. I have this js file loaded in my script tag of my HTML page.

var numberOnly = function(evt) { 

  var theEvent = evt || window.event; 
  var key = theEvent.keyCode || theEvent.which; 
  key = String.fromCharCode( key ); 
  var regex = /[0-9]|\./; 
  if( !regex.test(key) ) { 
    theEvent.returnValue = false; 

 } 
}; 

var wireElemToEvent = function(elemId, event, func){

var elem = document.getElementById(elemId);
if (typeof window.event !== 'undefined') {
    elem.attachEvent("on" + event, func);
} else {
    elem.addEventListener(event, func, true);
}
};



var wireEvents = function(){

wireElemToEvent("tbxQuantity", "keypress", numberOnly);
wireElemToEvent("tbxPhone", "keypress", numberOnly);
wireElemToEvent("tbxZip", "keypress", numberOnly);


};

window.onload = wireEvents;

Chrome tells me

file:///C:/Documents%20and%20Settings/xxx/Desktop/numbersonly/res/js/numbersonly.js:17Uncaught TypeError: Object # has no method 'attachEvent'

Any idea what I am doing wrong?

Thanks for any help, ~ck

Answer 1

One good way to make cross-browser scripting easier is to use jQuery. Plus, there's no reason to reinvent the wheel. Why not try this jQuery plugin: jQuery » numeric

Answer 2

Here is the function I use to attach events cross browser:

 function eventListen( t, fn, o ) {
  o = o || window;
  var e = t+fn;
  if ( o.attachEvent ) {
   o['e'+e] = fn;
   o[e] = function(){
    o['e'+e]( window.event );
   };
   o.attachEvent( 'on'+t, o[e] );
  }else{
   o.addEventListener( t, fn, false );
  }
 }

And to use it:

eventListen('message', function(e){
 var msg = JSON.parse(e.data);
    ...
});

Answer 3

In wireElemToEvent You may want to check that elem is not null after you initialize it. Also, it would be better to check the existence of elem.attachEvent and elem.addEventListener rather than whether window.event is defined.