How to put the keyboard out of iframe

[vinaykotla19]

Is there a way to place the keyboard outside of a iframe? I have a text box inside which is part of the iframe, whenever I click on it, keyboard opens within the frame only.

I have a limitation of having the css and js files within the jsp which is loaded in the iframe. I have tried all possible combinations of position but it does not help.

[Mottie]

Hi @vinaykotla19!

If the iframe is on the same origin as the outer page, you can target the iframe from the outer page. See issue #230, and this demo.

[vinaykotla19]

Hi Mottie,

Thanks for the response.

I think that has the css and the js files in the iframe as well and that is why it seems to be working. I only have the js and css within the jsp which is loaded in the iframe. It is similar to the src in the demo - 'src="/Mottie/Em8sG/2489/show/'.

[Mottie]

That's just the limitations of jsFiddle... the iframe may be loading the keyboard css and JS, but it is not executing any code. The outer frame is doing all the work.

[vinaykotla19]

I inspected the textbox element shown in demo in chrome and I see that the keyboard div is outside the frame and not within the iframe. When I inspect my code, the div is inside the frame that is why it is not loading outside the iframe. That is the only difference I observe and that seems to be because the js is available in the iframe as well. Attached is from the demo.

[Mottie]

The outer page is targeting the input inside the iframe. No code is run in the iframe. The keyboard is attached to the outer page because that is the only keyboard code being run. Please disregard the iframe loading the keyboard JS and CSS.... in fact, here is a different demo with an iframe that only contains an input - http://jsfiddle.net/Mottie/Em8sG/4556/

[vinaykotla19]

If I understand correctly, the keyboard and css code is in the parent page of iframe ?

In my case here is how it is:
Parent Page -> iFrame -> JSP(This has the keyboard and css code).
I cannot put it in the parent page, is there a way to pop out the keyboard on the parent page from iframe with the above code structure?

[Mottie]

You are correct in your understanding.

I'm assuming the parent page doesn't contain any required css, only the iframe... then you'll need to inject the style into the parent. In this demo, the basic keyboard style is injected because injecting jQuery UI and its stylesheet is more troublesome.

Iframe

HTML

<script src="js/jquery.min.js"></script>
<script src="js/jquery.keyboard.min.js"></script>

<input id="keyboard" type="text" />

Script

$(function() {
  var cssToInject = "https://mottie.github.io/Keyboard/css/keyboard-basic.css";

  // for demo purposes... show keyboard on this page,
  // or in the parent document if in an iframe
  var $parent;
  try {
    $parent = $(parent.document);
  } catch (e) {
    $parent = $(document);
  }

  function injectCSSIntoParent() {
    $('<link href="' + cssToInject + '" rel="stylesheet"></link>').appendTo(
      $parent.find("head")
    );
  }

  $("#keyboard").keyboard({
    usePreview: false,
    appendTo: $parent.find("body"),
    initialized: function() {
      injectCSSIntoParent();
    }
  });
});

[vinaykotla19]

Thanks a lot Mottie, appreciate the help. This works as required.

[Mottie]

I'm guessing this issue has been resolved, so I'm going to close it. If you continue to have problems, please feel free to continue the discussion in this thread.