Set focus to jHtmlArea jQuery plugin

StackOverflow https://stackoverflow.com/questions/1615861

Question

I'm using the jHtmlArea jQuery plugin on my page and I'm making it visible onClick of a button. Now I'm trying to place the focus into the jHtmlArea editor once it's displayed, but just can't seem to get there.

I did find this blog post Setting Focus to Control in an IFRAME using jQuery which is talking about setting focus to an element inside the IFrame that the thickbox plugin utilizes by setting focus to the IFrame first then to the element, but jHTMLArea doesn't place any elements into its IFrame.

So either I'm not properly selecting the IFrame's body element or calling .focus() to the body is doing nothing for me.

Here's the output that jHtmlArea is generating:

<div class="jHtmlArea" style="width: 498px;">
  <div class="ToolBar" style="width: 496px;">
    <ul>
      ... removed toolbar code for briefness
    </ul>
  </div>
  <div>
    <iframe style="height: 256px; width: 494px;">
      <html>
        <head>
          <link rel="stylesheet" type="text/css" href="jHtmlArea.Editor.css"></link>
        </head>
        <body>
           <br _moz_editor_bogus_node="TRUE" _moz_dirty=""/>
        </body>
      </html>
    </iframe>
  </div>
  <textarea id="TxtAreaDescription" rows="15" cols="60" name="TxtAreaDescription" style="display: none;"/>

Here's some of what I've tried:

var iframe = $("iframe");
if (iframe != null) {
    $(iframe).focus();
    $(iframe).contents().find("body").focus();
}

Thanks for any help you can pass on.

Was it helpful?

Solution

loaded: function() { this.iframe[0].contentWindow.focus(); }

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top