Key in backbone.js?

Question

It seems like a keystroke can only be performed on a focus element? I do not completely agree with this, should there be a way to execute a keypress event similar to a click event?

I have a view that works with one element at a time. I have a mouseenter function - mouseleave , which adds a class to the element that the mouse is finished with. When an element receives this class, I want to be able to use a keypress event to trigger a function for this element.

Obviously this is a small hurdle, but I'd like to figure out what I need to do. The following is an example.

 var PlayerView = Backbone.View.extend({ tagName: 'div', events: { 'click .points, .assists, span.rebounds, span.steals':'addStat', 'mouseenter': 'enter', 'mouseleave': 'leave', 'keypress': 'keyAction' }, enter: function() { this.$el.addClass('hover'); }, leave: function() { this.$el.removeClass('hover'); }, keyAction: function(e) { var code = e.keyCode || e.which; if(code == 65) { alert('add assist') } } }); 

So, there isn’t much logic here, but I think I’ll write something like this

  keyAction: function(e) { var code = e.keyCode || e.which; if(code == 65) { var addAssist = parseInt(this.model.get('assists')) + 1; this.model.save({assists: addAssist}); } } 

Basically, if I could figure out how to run this keyAction method, I should be good. So, what are some of the caveats that I miss when executing some code? I am sure there are several.

I understand what is wrong with this code, it doesn’t know when we run keypress in this view, I will need to add a conditional or something to find the active class, so when I execute keypress it knows which model I say a very vague description here, but I realized that something is wrong, I'm just not sure how to do this?

My decision

 initialize: function() { this.listenTo(this.model, "change", this.render); _.bindAll(this, 'on_keypress'); $(document).bind('keydown', this.on_keypress); }, enter: function(e) { this.$el.addClass('hover'); }, leave: function(e) { this.$el.removeClass('hover'); }, on_keypress: function(e) { // A for assist if(e.keyCode == 65) { if(this.$el.hasClass('hover')) { var addThis = parseInt(this.model.get('assists')) + 1; this.model.save({assists: addThis}); } } // R for rebound if(e.keyCode == 82) { if(this.$el.hasClass('hover')) { var addThis = parseInt(this.model.get('rebounds')) + 1; this.model.save({rebounds: addThis}); } } // S for steal if(e.keyCode == 83) { if(this.$el.hasClass('hover')) { var addThis = parseInt(this.model.get('steals')) + 1; this.model.save({steals: addThis}); } } // 1 for one point if(e.keyCode == 49) { if(this.$el.hasClass('hover')) { var addMake = parseInt(this.model.get('made_one')) + 1; this.model.save({made_one: addMake}); var addOne = parseInt(this.model.get('points')) + 1; this.model.save({points: addOne}); } } // 2 for two points if(e.keyCode == 50) { if(this.$el.hasClass('hover')) { var addMake = parseInt(this.model.get('made_two')) + 1; this.model.save({made_two: addMake}); var addTwo = parseInt(this.model.get('points')) + 2; this.model.save({points: addTwo}); } } // 2 for two points if(e.keyCode == 51) { if(this.$el.hasClass('hover')) { var addMake = parseInt(this.model.get('made_three')) + 1; this.model.save({made_three: addMake}); var addThree = parseInt(this.model.get('points')) + 3; this.model.save({points: addThree}); } } } 

This is cool for my application, because when a user hovers over an item, the user can press a key to add data, rather than click.

Answer 1

Thus, you can listen to a keystroke in any element on which the listener (or its children) is installed. And the keypress event only lights up if the element is focused. Therefore, I believe that the best solution for you would be to set focus on the element you are hovering over, then you can listen to keypress or, even better, listen to keydown , because it behaves in a more standard way cross-browser.

Here is a working JSFiddle demonstrating this technique: http://jsfiddle.net/DfjF2/2/

Only some form elements accept focus . You can add contenteditable or tabindex to an element, and this should allow almost any element to get focus, but then the keydown event will not actually keydown ! This is a browser related issue. In my experience, <span> keydown and keyup events that will keyup in every browser I tested (Chrome, Firefox, IE, Safari, Android browser, Silk). So in jsfiddle I added a span inside the target element, put focus on it and added a keydown event listener to it.

So, if you added an empty <span> bunch to your view, your code might look something like this:

 var PlayerView = Backbone.View.extend({ tagName: 'div', events: { 'click .points, .assists, span.rebounds, span.steals':'addStat', 'mouseenter': 'enter', 'mouseleave': 'leave', 'keydown': 'keyAction' }, enter: function() { this.$el.addClass('hover'); var span = this.$el.find('span'); span.attr('tabindex', '1').attr('contenteditable', 'true'); span.focus(); }, leave: function() { this.$el.removeClass('hover'); var span = this.$el.find('span'); span.removeAttr('contenteditable').removeAttr('tabindex'); span.blur(); }, keyAction: function(e) { var code = e.keyCode || e.which; if(code == 65) { alert('add assist') } } });