Forum Moderators: open
I'm trying to implement an integrated HTML editor into my application.. but I'm hitting my head against a brick wall trying to get the focus working the way I want it to within it...
I've produced a simplified version of the editor bellow to demonstrate the problem
- Immediately on loading, I want the focus to be placed within the body of the iframe.. I don't really care where even.. just so that the user can start inputting text without having to click within the iframe.. If you use the dropdown box to insert some text, it'll be placed at the top of the screen rather than bellow the toolbar.
The strange part here is that sometimes it works.. sometimes it doesn't (if i keep hitting f5, I can see it sometimes working.. and sometimes not).. I can't figure out why it is intermittant.. or how to guarantee that the focus will be where I expect it to be..
I've used so many techniques to try and get the body element within the iframe and then to focus it.. but none seem to work reliably..
The problem also effects my full editor when I switch between source and preview modes.. but I've ommited that from the bellow example as I belive the solution to that will be the same as the one I've just detailed..
The parameters for this exercise are:
- the editing area has to be an iFrame.
- It must work in IE6.. other browsers aren't supported currently.
If anyone needs any additional information, please just ask.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>GRRRRRrrrrrrrrrrrr</title>
<style>
body { border: 0px; margin: 0px; overflow: hidden; }
.toolbar { background-color:#c3daf9; font:menu; border:1px solid #c3daf9 }
</style>
<script type="text/javascript">
function init() {
var htmled = document.getElementById("html_editor");
htmled.contentWindow.document.write( "This is some text within the iframe" );
html_editor.document.designMode = 'on'
htmled.contentWindow.focus();
}
</script>
</head>
<body onload="init()">
<table width="100%" height="100%" cellspacing="0" cellpadding="0">
<tr>
<td height="1%">
<table cellspacing="1" class="toolbar" width="100%">
<tr>
<td>
<select size="1" id="dataDropBox" onchange="var r=html_editor.document.selection.createRange();r.text=this.value;this.selectedIndex=0;" >
<option value="">Choose text to insert</option>
<option value="SomeText">Insert SomeText</option>
<option value="MoreText">Insert MoreText</option>
</select>
</td>
<td width=100%> </td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="100%" valign="top">
<iframe id="html_editor" style="width:100%;height:100%" border="0" frameborder="0"></iframe>
</td>
</tr>
</table>
</body>
</html>
This problem has been driving me nuts on and off for a number of weeks now.. I'm now at the point where everything else is working appart from this... so if anyone could shed any light on it for me, I'd be much obliged!
Cheers!
Use onload event handlers on the main page and the contents of the <iframe> with both setting the focus.
Kaled.
Use onload event handlers on the main page and the contents of the <iframe> with both setting the focus.
Blimey.. I really didn't realise that this was going to be quite as much of a faff as it has turned out to be.
I've came across the suggestion of using an onload function within the iframe to grab hold of the focus, but i'm not sure how that would work when changing between the divs that hold the code and CSS views and the iframe that holds the 'design' view (within the full editor) as I can't use the onload trigger there..
I'm getting the distinct impression that there is no way to access the focus methods within the iframe from the parent window?
Placing focus on the iframe itself seems to work okay... it just places the cursor in the wrong place..
Is there such a thing as an onFocus event within the iframe? So when the iframe gained focus, it could trigger another function within the iframe to place the focus within the body?
Yesh... this really shouldn't be this hard surely?
