By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
459,504 Members | 1,092 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 459,504 IT Pros & Developers. It's quick & easy.

key stroke not suppressed

Claus Mygind
100+
P: 571
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:
Expand|Select|Wrap|Line Numbers
  1. <input type="text" id="AMOUNT" onkeypress="return 
  2. exp.isMoney(event)" />
  3.  
using this javaScript code, the errant keystroke is not recorded.
Expand|Select|Wrap|Line Numbers
  1.     this.isMoney = function(evt){
  2.         evt = (evt) ? evt : event; 
  3.         var charCode = (evt.charCode) ? evt.charCode : ((evt.keyCode) ? evt.keyCode :  
  4.             ((evt.which) ? evt.which : 0)); 
  5.         var eventCode = evt.keyCode
  6.         //allow navigation to correct errors
  7.         if ( !this.isNavigation(eventCode) )
  8.         {
  9.             if ((charCode > 32 && (charCode < 48 || charCode > 57)) && charCode != 46)  
  10.             { 
  11.                     alert("Not a number."); 
  12.             return false; 
  13.             }
  14.         } 
  15.         return true; 
  16.     };
  17.  
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:
Expand|Select|Wrap|Line Numbers
  1.                         <input 
  2.                             type="text" 
  3.                             id="AMOUNT" 
  4.                             size="10" 
  5.                         />
  6.  
Here is the javaScript code
Expand|Select|Wrap|Line Numbers
  1. function load(){
  2.     var amount = document.getElementById('AMOUNT');
  3.      amount.addEventListener("keypress", function(evt){exp.isMoney(evt)},false);
  4.     return;
  5. }
  6.  
This code branches to the same function listed above, but the key stroke is not suppressed. Why is that?
May 22 '11 #1

✓ answered by 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):
Expand|Select|Wrap|Line Numbers
  1. if (!Function.prototype.bind) {
  2.     Function.prototype.bind = function (obj) {
  3.         var fn = this;
  4.         return function () {
  5.             return fn.apply(obj, arguments);
  6.         }
  7.     };
  8. }
Expand|Select|Wrap|Line Numbers
  1. amount.addEventListener("keypress", exp.isMoney.bind(exp), false);

Share this Question
Share on Google+
5 Replies


Dormilich
Expert Mod 5K+
P: 8,639
Expand|Select|Wrap|Line Numbers
  1. function load(){
  2.     var amount = document.getElementById('AMOUNT');
  3.      amount.addEventListener("keypress", function(evt){exp.isMoney(evt)},false);
  4.     return;
  5. }
why so complicated?
Expand|Select|Wrap|Line Numbers
  1. 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.preventDefault(); // DOM resp. event.returnValue = false; // IE

* - or asked the other way round, what is the return value of several functions executed one after the other without coupling?
May 22 '11 #2

Claus Mygind
100+
P: 571
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.
Expand|Select|Wrap|Line Numbers
  1. 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"
May 23 '11 #3

Dormilich
Expert Mod 5K+
P: 8,639
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):
Expand|Select|Wrap|Line Numbers
  1. if (!Function.prototype.bind) {
  2.     Function.prototype.bind = function (obj) {
  3.         var fn = this;
  4.         return function () {
  5.             return fn.apply(obj, arguments);
  6.         }
  7.     };
  8. }
Expand|Select|Wrap|Line Numbers
  1. amount.addEventListener("keypress", exp.isMoney.bind(exp), false);
May 23 '11 #4

Claus Mygind
100+
P: 571
Thanks for the clarification. I will work to improve my code
May 23 '11 #5

Dormilich
Expert Mod 5K+
P: 8,639
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 ).
May 23 '11 #6

Post your reply

Sign in to post your reply or Sign up for a free account.