Anyone got an idea why this doesnt work? Im tyring to add the listener to the children rather than to the body so I can later disable certain keystrokes (like the return key).
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript">
function test(){
var divs = document.getElementsByTagName('div');
for(i in divs){
divs[i].onkeydown=function(event){alert('ok:'+event)}
}
}
</script>
</head>
<body onload='test()' contentEditable ="true">
<div>test 1</div>
<div>test 2</div>
<div>test 3</div>
</body>
</html>
UPDATE:
Preferably, Is there any way to prevent bubbling to the child div if I put the listener on the parent tag? I basically need to occasionally disallow return breaks in this setup.
You’ve made the body editable but not the children, therefore you’ll never be able to capture keystrokes for the children. Make the children editable instead of the body.
http://jsfiddle.net/Kai/sDdN3/
*Updated fiddle to include up/down arrow support (see comment)