Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Dynamic onkeydown not working on children with contentEditable parent

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.

like image 672
cronoklee Avatar asked Feb 01 '26 20:02

cronoklee


1 Answers

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)

like image 81
Kai Avatar answered Feb 04 '26 09:02

Kai



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!