Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Does Mousetrap support catch event in iframe? #107

Open
July-G opened this issue Mar 30, 2013 · 5 comments
Open

Does Mousetrap support catch event in iframe? #107

July-G opened this issue Mar 30, 2013 · 5 comments

Comments

@July-G
Copy link

July-G commented Mar 30, 2013

I have a rich text editor in my app, the editor is implemented as a iframe, i try to catch event in it but seem no effect(i added the "mousetrap" as class).

<iframe class="ke-edit-iframe" hidefocus="true" frameborder="0" style="width: 100%; height: 390px;">
#document
<html>
<head><meta charset="utf-8"><title></title>
<style>
</style>
</head>
<body class="ke-content mousetrap">the content....</body>
</html>
</iframe>
@ccampbell
Copy link
Owner

Mousetrap events bound to the parent page will not trigger in an iframe and vice versa. Mousetrap events bound in the iframe should fire when the iframe has focus.

If the text editor uses an input or text area then the mousetrap class should be applied to that element and not the body. Alternatively you could try the the bind global plugin.

If you want to have keyboard events on the parent page trigger things to happen in the iframe or the other way around you could bind the events in one place and then communicate between the frames using post message.

See http://viget.com/extend/using-javascript-postmessage-to-talk-to-iframes

@funivan
Copy link

funivan commented Aug 13, 2013

You can create this function in mousetrap.js and call it every time to bind keys in iframe

Mousetrap.init = function(el){
    if (el == undefined) {
      el = document;
    }
    _addEvent(el, 'keypress', _handleKeyEvent);
    _addEvent(el, 'keydown', _handleKeyEvent);
    _addEvent(el, 'keyup', _handleKeyEvent);
  }

@chieffancypants chieffancypants mentioned this issue Aug 11, 2014
Closed
@Craga89
Copy link

Craga89 commented Nov 11, 2014

We can add a newly exposed method to support this use case? Such as the below

// Exposed on the `Mousetrap` object
bindEvents: function(el) {
    _addEvent(el, 'keypress', _handleKeyEvent);
    _addEvent(el, 'keydown', _handleKeyEvent);
    _addEvent(el, 'keyup', _handleKeyEvent);
}

@Craga89 Craga89 mentioned this issue Nov 11, 2014
Closed
@mightyiam
Copy link

+1 on #235 . Thank you, @Craga89 .

@mightyiam
Copy link

My fork, https://www.npmjs.org/package/combokeys, has this feature:

var combokeys = new Combokeys(document.getElementById("someIframeOrSomething"));

And then your combokeys instance is bound to that element.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
5 participants
@Craga89 @ccampbell @funivan @mightyiam @July-G