Facebook have textarea's where they expand/shrink to the size of the text inside of it. In my Chrome extension I change the text inside a textarea to be over several lines. However, the textareas expand/shrink method only works on keyboard events, so I have to trigger one.
var event = document.createEvent('KeyboardEvent');
event.initEvent('keyup', true, true, window, false, false, false, false, 38, 38);
this.dispatchEvent(event); // this is the textarea
(It does this for all of keyup, keydown, keypress)
But this doesn't work. Now, I know a bit of why it doesn't work, but not how to solve it. I have attached a handler to the element to see what is going on:
$('[role=dialog] .MessagingComposerForm textarea').on('keyup', function(e) {
console.log(e);
});
When the Chrome extension triggers its keyup event, the object which I can see in my console is a normal Event object, except for two things: keyCode=0 and view=null.
When I trigger the keyup event by hitting a key on my keyboard I can see that keyCode=38 and view=Window.
Does anyone have an idea on how to do this?
ADDED:
I discovered something. If I console.log the event before it is dispatched it still doesn't contain the correct information. Here:
var event = document.createEvent('KeyboardEvent');
event.initKeyboardEvent('keydown', true, true, window, false, false, false, false, 65, 65);
event.keyCode = 65;
event.which = 65;
event.charCode = 65;
console.log(event);
this.dispatchEvent(event); // this is the textarea
outpus this object:
KeyboardEvent: {
...
charCode: 0,
keyCode: 0,
view: Window,
which: 0
}
initKeyboardEventwith the same arguments instead ofinitEvent? – haynarkeypresson Safari. It probably won't solve your issue, but may contain some useful information. – apsillers