I have a component that holds the following template:
<div>
{{textarea value=content autofocus="autofocus"}}
<button {{action 'cancel'}}>cancel</button>
</div>
How can I listen to a paste event on this textarea in my component?
I tried to create a paste action but this doesn't seem to work:
App.EditableTextComponent = Ember.Component.extend({
templateName: 'components/editable-text',
actions: {
paste: function() {
console.log(arguments);
}
}
});
As @wojciech-bednarski suggest in his comment, I have added the custom event listener to my app:
var App = Ember.Application.create({
customEvents: {
paste: "paste"
}
});
and could then listen to it in my component
App.EditableTextComponent = Ember.Component.extend({
paste: function(event) {
console.log(event)
}
});
You can try something like,
App.EditableTextComponent = Ember.Component.extend({
didInsertElement:function(){
this._super();
var self = this;
this.$('textarea').on("paste",function(e){
alert('you just pasted something');
/*to be more accurate when calculating the pasted value,
you may need to get the current value of the textarea here
and then remove it from the value retrieved inside setTimeout*/
setTimeout(function () {
/*the paste event is fired before the value has already been set,
so this is handled here.
Also mentioned here as a hacky solution, http://stackoverflow.com/questions/9494283/jquery-how-to-get-the-pasted-content*/
alert("pasted:"+self.$('textarea').val());
}, 100);
});
},
templateName: 'components/editable-text'
});
