KeyChange events within iFrame

[FredFronky]

Hi there,
I've been playing with this keyboard, and it all seems very capable. I've run into one issue with my particular setup, and I'm not sure if it's a bug or a problem with my code. Essentially, I have the virtual keyboard in the parent, and an iFrame with some text fields. When the iFrame has loaded, I add the keyboard to the inputs from the parent using $("#iFrame").contents().find("input").keyboard({.... The keyboard opens when tapping the text field, and text appears in the box, but there are no keyChange or input events. Is this expected behaviour?
I created this JSFiddle, based on an example found in one of the previously solved issues. It doesn't behave in the same way as my development environment, as the keyup events are not read from inside the iFrame in JSFiddle, and they are in my environment, but it gives an idea of how my content is laid out.
Any help would be much appreciated

[Rob Garrison]

Hi @FredFronky !

I'm assuming you're basing your work off of this virtual keyboard inside an iframe demo?

How are you listening to the keyChange & input events? Please share the code you're using.

[FredFronky]

Hi @Mottie
Thanks for your help! I used the demo as a starting point, and then added some event listeners to the iFrame. I've tried a few different things, but this is the gist of my approach. I'm using Pug for templating.

input(type="text" id="searchInput" class="searchBox" onInput="search()" placeholder="Search within results" autocomplete="off")

$('#searchInput').bind('keyboardChange', function(e, keyboard, el){ 
    console.log("Keyboard event");
    search()
});

I've tried keyup and keydown events as well. Using the physical keyboard triggers the onInput event, but it isn't triggered by the virtual keyboard. Is this something that you would expect to work?

[Rob Garrison]

If you want to bind to events inside the iframe, you'll still need to target the iframe first, then contents...

$("#iFrame")
  .contents()
  .find("#searchInput")
  .on("keyboardChange", function(e, keyboard, el) {
    console.log("Keyboard event");
    search();
  });

But, I think it'd be better to use the built-in change callback function.

[FredFronky]

Ah, that works perfectly. For anyone looking at doing this in the future, I added a change callback function to the code which creates the keyboard, which fires a function in the parent whenever the keyboard is used. I then use this function to trigger the search function inside the iFrame using:
document.getElementById("iFrame").contentWindow.search();
Thanks @Mottie for your help. Unless there's a better way to trigger a function inside the iFrame, I'm happy to mark this as closed