Ok, in case anyone else ever bangs their head against this...
To get a key event in FF, for a DIV (or other element such as IMG
which usually doesn't generate the key events) you do the following:
1. Ensure the element receives focus on mouseover (and blur it on
mouseout)
2. Set the tabIndex property to -1 (don't ask me why)
Below is some test HTML that demonstrates the various combinations.
BTW, my FF version is 2.0.0.9
[Mozilla/5.0 (Windows; U; Windows NT 6.0; en-US; rv:1.8.1.9) Gecko/
20071025 Firefox/2.0.0.9]
======================================
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://
www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<script type="text/javascript" src="./mootools-1.2-core.js"></script>
<script type="text/javascript" src="./mootools-1.2-more.js"></script>
<script type="text/javascript" src="./mootools-compat-core.js"></
script>
<script type="text/javascript" src="./mootools-compat-more.js"></
script>
<style type="text/css">
.drop {
float: left;
margin: 10px;
width: 100px;
height: 100px;
}
.d1 {
background: #f00;
}
.d2 {
background: #0f0;
}
.d3 {
background: #00f;
}
.d4 {
background: #555;
}
</style>
<script type="text/javascript">
window.addEvent('domready', function(){
$$('.drop').each(function(element){
element.addEvent('keydown', function(evt){
alert('key down!');
});
element.setProperty('tabIndex', '-1');
});
$$('.drop').each(function(element){
element.addEvent('dblclick', function(evt){
alert('dblclick!');
});
});
$$('.drop').each(function(element){
element.addEvent('keyup', function(evt){
alert('key up!');
});
});
$$('.drop').each(function(element){
element.addEvent('keypress', function(evt){
alert('key press!');
});
});
// IF YOU DO THIS...THEN DIVS IN FF WILL REACT TO KEYS
$$('.d4').each(function(element){
element.addEvent('mouseover', function(evt){
this.focus();
});
element.addEvent('mouseout', function(evt){
this.blur();
});
element.setProperty('tabIndex', '-1');
});
});
</script>
</head>
<body>
<div class="drop d1"></div>
<div class="drop d1">foobar</div>
<br clear="all"/>
<div class="drop d2" ONMOUSEOVER="this.focus()"
ONMOUSEOUT="this.blur()"></div>
<div class="drop d2" ONMOUSEOVER="this.focus()"
ONMOUSEOUT="this.blur()">foobar</div>
<br clear="all"/>
<div class="drop d3" onkeypress="alert('key press!');"><input
name="keyword1" type="text" value="Test data" id="keyword1" size="15" /
></div>
<div class="drop d3" onkeypress="alert('key press!');"><input
name="keyword1" type="text" value="Test data" id="keyword1" size="15" /
>foobar</div>
<br clear="all"/>
<div class="drop d4"></div>
<div class="drop d4">foobar</div>
<br clear="all"/>
<img class="drop d1" src="./happyface.gif" />
<br clear="all"/>
<div id="d3" style="width:100px;height:100px;"
onkeydown="javascript:alert('onkeydown')"></div>
</body>
</html>
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups "MooTools Users" group.
To post to this group, send email to
[hidden email]
To unsubscribe from this group, send email to
[hidden email]
For more options, visit this group at
http://groups.google.com/group/mootools-users?hl=en-~----------~----~----~----~------~----~------~--~---
