EzDevInfo.com

Mousetrap.bind is not working when field is in focus?

I am using Mousetrap for create keyboard shortcuts, it was not working when any fields in focus. This is the link for view demo http://davidwalsh.name/keyboard-shortcuts from where i get the code. when i use to call

Mousetrap.bind('ctrl+m', function () {
    var button = $('[data-action="next-page"]');
    if (button.length) {
        button[0].click()
    }
});

like this it not working , when mouse points in text-box or drop-down etc,. Can any give solution for me. Thanks in advance.

Using mousetrap on a specific element?

I am using the Mousetrap javascript library and am wanting to capture input on a specific element.

The scenario is I have a textbox for username and password which KnockoutJS binds to then when a button is pressed an ajax request is made to login the user. Now as there is no form and its not a real button its an anchor that Jquery UI turns into a button I was wondering if there was some simple way to get mousetrap to bind to the element rather than at the document level.

So for example a normal mousetrap binding would be:

Mousetrap.bind('enter', function(event) { CallSomeAjaxMethod(); });

Now that will check for any enter key press on the page (outside of a textbox element) and then do something based on it. Now the problem is in this case I am wanting to be able to ONLY capture this event whenever it is carried out within the scope of a specific element.

So for example I would be wanting to do something likethis:

var element = document.getElementById("some-element");
Mousetrap.bind('enter', element, function(event) { CallSomeAjaxMethod(); });

or maybe more fluent like:

Mousetrap.bind('enter', function(event) { CallSomeAjaxMethod(); }).on(element);

Is there any way to do this? the only way I can see to do it (with Mousetrap) currently is to have this document scope binding and just try to get the element the event was raised on if it is possible.

I know you can do this sort of thing with Jquery or vanilla js however as I already have Mousetrap loaded I would like to re-use it here if possible.

React JS call function within another component

I'm trying to call one function from another component in React with the Mousetrap library.

class Parent extends React.Component {
    constructor() {
      super();

    } 
    ...
    render() {
      return(...);
    }
}
class Child extends React.Component {
    constructor() {
      super();
      this.state = { show: false };
      this.open = this.open.bind(this);
      this.close = this.close.bind(this);
    }
    open() {
      this.setState({ show: true });
    }
    close() {
      this.setState({ show: true });
    }
    render() {
      return(...);
    }
}

Now, what I want to do is call Mousetrap.bind('e', function(e) { Child.open() }); somewhere in the parent (because the parent will be rendered, and the child will only be rendered on this command). But, I'm not sure where to actually include that. Would it be better to call that in the constructor, or somewhere in render(), or somewhere else I haven't considered?

AngularJS tabs and hotkeys combination

I am trying to use the hotkeys to change the tabs in AngularJS. I am new to AngularJS but i am sure it should be as simple as the code below. So when a hotkey is pressed, it is unable to change the tab activeness. It is basically doing nothing for now but when 't' is pressed, it should display the tab2 content.

I created a keybinding directive which invokes a function and uses Mousetrap to use the keyboard shortcuts.So when the hotkey 't' is pressed, I am able to invoke the function and change the tab active to true but I am unable to show the changes in the View.

This is my html file

 <div ng-controller="TabsDemoCtrl">

 <keybinding on="t" invoke="hotkey()"></keybinding>
 <tabset>
  <tab ng-repeat="tab in tabs" heading="{{tab.title}}" active="tab.active">
   {{tab.content}}
  </tab>
 </tabset>
</div>

This is app.js file

  var app = angular.module('ui.bootstrap.demo', ['ui.bootstrap']);
  app.controller('TabsDemoCtrl', function ($scope, $window) {
  $scope.tabs = [
   { title:'Dynamic Title 1', content:'Dynamic content 1' },
   { title:'Dynamic Title 2', content:'Dynamic content 2'}
    ];

  $scope.hotkey = function(){
   $scope.tabs[1].active=true;
        }
  });

   app.directive('keybinding', function () {
    return {
      restrict: 'E',
     scope: {
         invoke: '&'
     },
    link: function (scope, el, attr) {
        Mousetrap.bind(attr.on, scope.invoke);
    }
 };
 });

Here's a Plunker.

MouseTrap lost focus in modal popUp

I have a web application that uses a mousetrap API for keyboard shortcuts. I am facing difficulties in the following scenario: I'm in a modal (jQueryUI) and this modal having a second modal alert. When the alert is closed, the focus does not return to main modal, making the shortcuts do not work, you need a mouse click in the modal div for the shortcut working again. My question is: is there any way to make the mousetrap ignore the focus on div and assume a global behavior?
If not, is there any way to work around this?

Curious to know why my Createjs with Mousetrap is going slow. (jsfiddle provided)

So I'm working with the new createjs, and they've removed flip and addflipframes. Apparently scaleX=-1 is suppose to be faster but now I get a weird lag when I want to move my character left and right. I'm just hoping that I've coded my movement functions faulty, or If its just mousetrap.js not being friendly with create.js

http://jsfiddle.net/w5uZF/8/ This is the jsFiddle with the test game. I'm just learning on how to use the new system.

This is my mousetrap bindings

Mousetrap.bind('a', function(){moveLeft();}, 'keydown');
Mousetrap.bind('d', function(){moveRight();}, 'keydown');

these are my functions for movement

function moveRight(){
    var speed = 20;
    sayaka.x += speed;
    sayaka.scaleX= 1;
}

function moveLeft(){
    var speed = 20;
    sayaka.x -= speed;
    sayaka.scaleX= -1;
}

I guess it would be good if i showed you guys how I made my sprite, which has 8 frames to it.

var dataSayaka = {
    images: ["http://i.imgur.com/rxDkp2Q.png"],
    frames: {width:133, height:139, regX: 50, regY:50},
    animations: {runRight:[0,1,2,3,4,5,6,7, "runRight"]}
};

var spriteSheetSayaka = new createjs.SpriteSheet(dataSayaka);
var animationSayaka   = new createjs.Sprite(spriteSheetSayaka, "runRight");
sayaka = new createjs.Sprite(spriteSheetSayaka, animationSayaka);

I'm open to any suggestions and criticism as I would love to know how to increase the movement performance.

I have tried to use native javascript key events to move my character, however the effect was the same. It's weird how the character lags when I move left and right.

accessing mutable variable in an event closure

I am trying to use the mousetrap javascript plugin to handle some key strokes in a similar fashion, so I thought to code them up as follows:

    var keys = [ 'b', 'i', 'u'];
    for (var i=0; i < 3; ++i) {
        var iKey = keys[i];
        var iKeyUpper = iKey.toUpperCase();

        Mousetrap.bind(
            [   'command+' + iKey,
                'command+' + iKeyUpper,
                'ctrl+' + iKey,
                'ctrl+' + iKeyUpper],
            ( function( e ) {
                console.log( "you clicked: " + i );
        } ) );

    }

But, obviously, i is mutable. However, I am not sure how to write a closure where I am competing the event parameter in the response. Suggestions on how to handle this situation?

jQuery plugin to extend on() function doesn't accept "this"

I'm writing a plugin to extend the on() function of jQuery to implement mousetrap.js

I should get from the function this and pass it to on().

This is my code:

    $.fn.superon = function (keys, myfn) {
        $("body").on("click", this, function (e) {
            myfn();
        });
        Mousetrap.bind(keys, function () {
            myfn();
        });
    };
    $.fn.superoff = function (keys) {
        $("body").off(this);
        Mousetrap.unbind(keys);
    };

The problem is that if I use it the event is attached to all the elements and not only the one selected.

http://jsfiddle.net/zkLMX/1/

What am I doing wrong?

Prevent keypress to bubble to input in mousetrap

I am using mousetrap for capturing key presses. One of the shortcuts I want to define is to focus on an input.

Mousetrap.bind('i', function() { $('.input').focus() });

The focussing works fine, but the 'i' keypress also gets bubbled to the input, and with being focussed, the input also gets populated with 'i'.

Is there a way to prevent the 'i' from being written in the input? Any help is appreciated.

Thanks

Making Mousetrap click a link

If I have a link and want to bind a keyboard shortcut to, how should I do that? This doesn't seem to work:

<a id="next" rel='nofollow' href="/next/page">Next page</a>
<script src="mousetrap.js"></script>
<script>
  Mousetrap.bind("n", function() {
    document.getElementById("next").click();
  });
</script>

Why is 'keydown'/'keyup' not triggering on the first key press?

I have a sprite that animates on the x-axis via the left and right arrow keys. It is setup to move on 'keydown' and stop on 'keyup'. The problem is, it only animates after the second key press. I've also tried holding down either left or right keys - which upon 'keyup the sprite still animates. Again, this cancels out after the second press of the 'same' key.

My events start at line 54.

I've set up a console log, so it may be easier to get an understanding by opening up the console while taking a look at the events.

Oh yeah, I'm using the EaselJS library, and the Mousetrap keyboard shortcut library; not sure that makes a difference because my problem is essentially linked to the browser. Any work-around or help on my existing code would be awesome.

function move() {
if (rightHeld) { // move right
    var speed = 3;
    chuck.x += speed;
    chuck.scaleX = 1;
} // end move right

if (rightHeld && keyDown == false) { // animate move right
    chuck.gotoAndStop('idle');
    chuck.gotoAndPlay('walk');
    keyDown = true;
} // end animate move right

if (leftHeld) { // move left
    var speed = 3;
    chuck.x -= speed;
    chuck.scaleX =- 1;
} // end move left

if (leftHeld && keyDown == false) { // animate move left
    chuck.gotoAndStop('idle');
    chuck.gotoAndPlay('walk');
    keyDown = true;
    } // end animate move left
} // end function move

/* KEYDOWN*/
function handleKeyDown(event) {
    Mousetrap.bind('right', function () {
            rightHeld = true;
            console.log('keydown right');   

    }, 'keydown'); // end 'right'

    Mousetrap.bind('left', function () {
            leftHeld = true;
            console.log('keydown left');   

    }, 'keydown'); // end 'left'

} // end function handleKeyDown

/* KEY UP */
function handleKeyUp() {
    Mousetrap.bind('right', function () {
        chuck.gotoAndStop('walk');
        chuck.gotoAndPlay('idle');
        rightHeld = false;
        keyDown = false;
        console.log('keyup right');

    }, 'keyup'); // end 'right'

    Mousetrap.bind('left', function () {
        chuck.gotoAndStop('walk');
        chuck.gotoAndPlay('idle');
        leftHeld = false;
        keyDown = false;
        console.log('keyup left');

    }, 'keyup'); // end 'left'

    } // end function handleKeyUp

JSFiddle

Thanks smart people!