Richard January 9th, 2016 Hi there
I wonder if someone could help with what seems to be a simple browser incompatibility problem. I'm using the online editor and trying to set up a simple routine under an object's onKeyPress function. It seems to work fine in Chrome and IE but not in Firefox.
The aim of the routine is to return the ascii code associated with a key press. so:
function getKey(event)
{
console.log(event); // some debugging code to see if event is captured
var key = event.which;
console.log(key); // some debugging code to see if correct ASCII code is returned
return key;
}
As I say, seems to work fine except in Firefox where a console error is generated (ReferenceError: event is not defined) pointing to wade.js line 173 > eval
and none of the debugging code in the routine above yields any output
Can anybody help?
Gio January 11th, 2016 Hi Richard
From your description, rather than a problem with the function above, it sounds like a problem with the code that is calling that function. Could you show the calling code to us?
Thanks
Richard January 11th, 2016 Hi Gio
Thanks for your reply. The problem does indeed seem to be with the code that is calling the function.
What I'm doing is simply
var key = getKey(event);
console.log(event);
console.log(key);
from within an object's onKeyPress function. The function getKey() is defined as in my first post.
I run this, getting the output
KeyboardEvent {isTrusted : true}
97
in Chrome etc, but
ReferenceError : event is not defined
in Firefox.
OK - so I guess the object 'event' associated with the keypress needs to be replaced with something more browser-independent??
Thanks again
Richard
Gio January 13th, 2016 Sorry for the slow reply.
I can't quite understand from the code above where that "event" object is coming from. Do you want to send me your code as a zip so I can have a look?
You can attach it to this post, PM it to me, or email it to gio at clockworkchilli.com
Richard January 14th, 2016 Hi Gio
Thanks for your reply. I've just parcelled up a very simple project that has the problem as described, and emailed it to you at clockworkchilli.com - all help much appreciated!
R
Gio January 15th, 2016 Hi Richard
I hope you don't mind me replying to this thread rather than your email, I think it's more useful here so people looking for the same things will find it.
To answer your question: yes, different browsers do different things with key events. However WADE handles this for you, resolving any browser-specific differences.
So instead of getting the event object that may be browser specific, you should just look at the data object that is passed to every event handler in WADE. In this case, I think you just want your onKeyPress function to be something like
console.log(data.charCode);
This should work the same on all browsers.
I hope this helps but please feel free to post here if you have any more questions or comments.
Thanks
Richard January 15th, 2016 Problem solved. Many thanks, Gio
Another small issue that users might like to bear in mind is that pressing certain keys returns different values for data.charCode depending on the browser. For example pressing <rtn> gives 0 on Firefox but 13 (the usual ASCII value) on Chrome.
R
Gio January 15th, 2016 I would add that if you're going to use this for movement (for example to control your character on the screen), it's probably better to use keyup / keydown rather than keypress.
That will give you more consistent key codes across different browsers, and will give you the same result regardless of the state of Shift, Ctrl, etc so 'a' and 'A' will both have the same key code.
Also, if pressing and holding a key, the keypress event may fire multiple times, whereas keydown and keyup, as the names suggest, will only fire once when the key is first pressed or released.
