key stroke not suppressed

[Claus Mygind]

I am trying to convert a html onkeypress event handler to an event listener.

I want to prevent alpha characters from being entered in an element where the information must be restricted to money ie: 1.23,

I was able to do that with this simple event handler on the html:

<input type="text" id="AMOUNT" onkeypress="return 
exp.isMoney(event)" />

using this javaScript code, the errant keystroke is not recorded.

	this.isMoney = function(evt){
		evt = (evt) ? evt : event; 
		var charCode = (evt.charCode) ? evt.charCode : ((evt.keyCode) ? evt.keyCode :  
			((evt.which) ? evt.which : 0)); 
		var eventCode = evt.keyCode
		//allow navigation to correct errors
		if ( !this.isNavigation(eventCode) )
		{
			if ((charCode > 32 && (charCode < 48 || charCode > 57)) && charCode != 46)  
			{ 
					alert("Not a number."); 
			return false; 
			}
		} 
		return true; 
	};

However when I assign an event listener using the same code, it still captures the errant key stroke but after my alert message the key stroke appears anyway. Here is my event listener code:

						<input 
							type="text" 
							id="AMOUNT" 
							size="10" 
						/>

Here is the javaScript code

function load(){
	var amount = document.getElementById('AMOUNT');
	 amount.addEventListener("keypress", function(evt){exp.isMoney(evt)},false);
	return;
}

This code branches to the same function listed above, but the key stroke is not suppressed. Why is that?

[Dormilich]

function load(){
	var amount = document.getElementById('AMOUNT');
	 amount.addEventListener("keypress", function(evt){exp.isMoney(evt)},false);
	return;
}

why so complicated?

amount.addEventListener("keypress", exp.isMoney, false);

you cannot return from event listeners like you can from event handlers*, thus you need to use a special method that does the same: Event.preventDe fault(); // DOM resp. event.returnVal ue = false; // IE

* - or asked the other way round, what is the return value of several functions executed one after the other without coupling?

[Claus Mygind]

Thanks for the reply. Since I do not have a hard cover manual to flip through, it is difficult to see all the choices available. .preventDefault () is really cool. Had no idea it existed.

You ask why so complicated. I first tried the option you suggest.

amount.addEventListener("keypress", exp.isMoney, false);

But I could not get it to work, because I needed to pass the event (current key stroke) to my function in order for my function to work. Some research on the web showed that I needed an anonymous function() to pass a parameter. For example if only numbers and the decimal are permitted and the user types "1a". I want to leave the 1 but on the keypress stroke of the "a", I want to alert the user "not a number" leave the "1" and suppress the "a"

[Dormilich]

But I could not get it to work, because I needed to pass the event (current key stroke) to my function in order for my function to work.

there must be a different reason because the DOM demands that the event object is to be passed as one and only parameter (and I never had problems with that either).

EDIT: your problem is the this inside exp.isMoney() (didn’t notice it earlier). either you wrap it in a function (like you previously did) or you bind the method to the object (which is pretty much the same):

if (!Function.prototype.bind) {
	Function.prototype.bind = function (obj) {
		var fn = this;
		return function () {
			return fn.apply(obj, arguments);
		}
	};
}

amount.addEventListener("keypress", exp.isMoney.bind(exp), false);

[Claus Mygind]

Thanks for the clarification. I will work to improve my code

[Dormilich]

glad you like it. I can remember how difficult it was to collect all that knowledge myself (try to find an advanced tutorial without any idea for what subjects to search …).