When I click [edit] (after already committing a word/definition), my goal is for the updateOnEnter method to save the changes made to the definition field, lose focus, and make the field uneditable. However, when I press Enter, the cursor unexpectedly moves to the line below and the field expands in size.
If you'd like to see the CodePen example, you can find it here: http://codepen.io/anon/pen/zxBZBe
var EntryView = Backbone.View.extend({
model: new Entry(),
tagName:'div',
events:{
'click .edit': 'edit',
'click .delete': 'delete',
'keypress .definition': 'updateOnEnter'
},
delete: function(ev){
ev.preventDefault;
dictionary.remove(this.model);
},
edit: function(ev){
ev.preventDefault;
this.$('.definition').attr('contenteditable', true).focus();
// this.$el.addClass('editing');
},
close: function(){
var definition = this.$('.definition').text();
this.$('.definition').removeattr('contenteditable');
this.model.set('definition', definition);
},
updateOnEnter: function(ev){
if(ev.which == 13){
this.close();
}
},
initialize: function(){
this.template = _.template($("#dictionary_template").html());
},
render: function(){
this.$el.html(this.template(this.model.toJSON()));
return this;
}
});