Keyboard Event Handling with FBJS
Thursday, February 19th, 2009FBJS event handling does not follow the default Facebook JavaScript event handling model exactly. Facebook re-writes the event object as a far more limited object, meaning you have access to less information than you would in a true Javascript environment. If you’re looking for information on how browsers handle the onKey* events, quirksmode is a fantastic reference, albeit Windows centric. I ran into this yesterday while looking to improve a user interface. This following illustrates some of the potential gotchas to keep an eye out for.
Test Code
The following code will capture all events related to that form element and send them to the console log. This is going to be a whole lot of information, so note where you can dial it back as needed. For my project I was able to modify the str return value to just include the fields I was concerned with.
<script type="text/javascript">
function captureKeyboardEvent(e){
var evt = e || window.event;
var str = evt.type;
// to make this less verbose - comment out the following 3 lines
for (var property in evt){
str += "\n -" + property + " = " + evt[property];
}
console.log(str);
}
</script>
<form>
<input type="text"
onKeyPress="logEvent(event);"
onKeyDown="logEvent(event);"
onKeyUp = "logEvent(event);"
onFocus = "logEvent(event);"
onBlur = "logEvent(event);"
/>
</form> |
Using Safari on a Mac produces the following output. What struck me as curious was the presence of pageX and pageY. As you can see the keyCode value is returned but not the charCode, timestamp or many other values as illustrated by the same code run without the benefit of the FBML parser.
keydown
-type = keydown
-ctrlKey = false
-keyCode = 65
-metaKey = false
-shiftKey = false
-target = [object Object]
-pageX = NaN
-pageY = NaN
-__priv = 3
-preventDefault = function ()
{
var data = fbjs_private.get(this);
...
data.return_value = false;
}
-stopPropagation = function ()
{
var event = fbjs_private.get(this).event;
...
}
} |
keydown
-keyLocation = 0
-ctrlKey = false
-shiftKey = false
-keyIdentifier = U+0041
-altKey = false
-metaKey = false
-altGraphKey = false
-pageY = 0
-layerY = 0
-pageX = 0
-charCode = 0
-view = [object DOMWindow]
-which = 65
-keyCode = 65
-detail = 0
-layerX = 0
-returnValue = true
-timeStamp = 1235049247482
-eventPhase = 2
-target = [object HTMLInputElement]
-srcElement = [object HTMLInputElement]
-type = keydown
-clipboardData = undefined
-cancelable = true
-currentTarget = [object HTMLInputElement]
-bubbles = true
-cancelBubble = false
-initKeyboardEvent = function initKeyboardEvent() {
[native code]
}
-initUIEvent = function initUIEvent() {
[native code]
}
-preventDefault = function preventDefault() {
[native code]
}
-initEvent = function initEvent() {
[native code]
}
-stopPropagation = function stopPropagation() {
[native code]
}
-MOUSEOUT = 8
-FOCUS = 4096
-CHANGE = 32768
-MOUSEMOVE = 16
-AT_TARGET = 2
-SELECT = 16384
-BLUR = 8192
-KEYUP = 512
-MOUSEDOWN = 1
-MOUSEDRAG = 32
-BUBBLING_PHASE = 3
-MOUSEUP = 2
-CAPTURING_PHASE = 1
-MOUSEOVER = 4
-CLICK = 64
-DBLCLICK = 128
-KEYDOWN = 256
-KEYPRESS = 1024
-DRAGDROP = 2048 |
Why does this matter?
If your creating code that looks at keypress input, there are some differences between browser implementations, what values are stored within the keyCode value and how Facebook passes those events on. In IE, Firefox and Safari, when a key is pressed down a keydown event is fired. When that key is released, a keyup event is fired. Pretty straightforward right? Here’s where it gets complicated.
As pointed out on Quirksmode, browsers handle the repeating event differently. Some place data in the charCode or keyCode values depending on context. Additionally, other modifier keys such as function and control keys are passed as boolean fields. However, we only get keyCode in FBJS. Furthermore, Safari and IE don’t ever raise the repeating keypress event like Firefox does, instead raising the keydown event only! However, Firefox does not raise the keydown event and the keypress event only passes back a keyCode of ‘0′.
Televisions are always a hot topic for holiday purchases and this year is no different. I was reviewing my Google Analytics numbers for AF-Design this morning and saw the annual spike in traffic to my 
