How to get target element of keypress in designmode iframe

Is it possible to get the target element in a keypress event handler in a design mode iframe ? I know it can be done in the mousedown event handler (by accessing event.target), but in the keypress / keydown handlers event.target is always the iframe element. For example, with the following html, if the user types into the div where it says *** key press here ***, I would like in the keypress / keydown event handler to be able to determine that the target element is the div with id='b'. Is this possible ?

<div id='a'>
      <div id='b'>
            *** Key press here ***
      </div>
</div>
emsttamAsked:
Who is Participating?

[Webinar] Streamline your web hosting managementRegister Today

x
 
jetcookConnect With a Mentor Commented:
Sorry, friend.

I made great efforts to solve this problem. It can run in IE / firefox / opera / chrome.

<!-- PARENT -->
<iframe id="iframe_id" src="f.htm"></iframe>

<script>
function do_some_thing(o) {
    alert(o.innerHTML);
}

window.onload = function () {
    var f = document.getElementById('iframe_id');
    var fwin = f.contentWindow || f.contentDocument;
    fwin.document.designMode = 'on';

    var evt_key = function (e) {
        e = e || fwin.event;
        var range = null, ret = null;

        if (fwin.document.selection) {
            range = fwin.document.selection.createRange();
            ret = range.parentElement();
        }
        else if (fwin.window.getSelection) {
            var range = fwin.window.getSelection().getRangeAt(0);
            ret = range.commonAncestorContainer.parentNode || fwin.document;
        }

        fwin.parent.do_some_thing(ret);
    };

    if (fwin.document.attachEvent) {
        fwin.document.attachEvent('onkeypress', evt_key);
    }
    else if (fwin.document.addEventListener) {
        fwin.document.addEventListener('keypress', evt_key, false);
    }
}
</script>


<!-- IFRAME -->
<div id='a'>
    A
    <div id='b'>
        B
    </div>
    A
</div>
ROOT
<div id='c'>
    C
</div>

Open in new window

0
 
jetcookCommented:
Please be carefully! Use "fwin" to indicate which document is using in event handle function.
<!-- PARENT DOCUMENT -->
<iframe id="iframe_id" src="f.htm"></iframe>

<script>
function do_some_thing(o) {
	alert(o.id);
}
window.onload = function () {
    var f = document.getElementById('iframe_id');
    var fwin = f.contentWindow || f.contentDocument;
    fwin.document.body.onmousedown = function (e) {
        e = e || fwin.event;
    	fwin.parent.do_some_thing(e.srcElement || e.target);
    };
}
</script>

<!-- IN IFAME DOCUMENT "f.htm" -->
<div id='a'>
      <div id='b'>
            *** Key press here ***
      </div>
</div>

Open in new window

0
 
emsttamAuthor Commented:
jetcook,

It's not the mouse event I want the target for, it's the key event.
0
 
emsttamAuthor Commented:
jetcook,

Excellent stuff, very good work. Thank you very much.
0
All Courses

From novice to tech pro — start learning today.