2

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

outputs this object:

KeyboardEvent: {
    ...
    charCode: 0,
    keyCode: 0,
    view: Window,
    which: 0
}
Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
freeall
  • 3,187
  • 4
  • 24
  • 31
  • I have made it work for mouse events. So I can easily trigger on click on elements which Facebooks handler then catches. I just can't make it work for keyboard events. – freeall Sep 17 '12 at 13:12
  • have you tried to use `initKeyboardEvent` with the same arguments instead of `initEvent` ? – haynar Sep 17 '12 at 13:15
  • Related? http://stackoverflow.com/questions/961532/firing-a-keyboard-event-in-javascript – apsillers Sep 17 '12 at 13:20
  • @haynar oddly enough, now the view is set to Window. But the keyCode is still wrong. Investigates more. – freeall Sep 17 '12 at 13:22
  • Note that my "related" link is actually `keypress` on Safari. It probably won't solve your issue, but may contain some useful information. – apsillers Sep 17 '12 at 13:29
  • @apsillers I read through it. And I tried a few other things. But nothing that changed anything. The jQuery examples won't work since it doesn't trigger the native handlers on the DOM elements. I think that one of the reason this is "strange" might be that it runs as a Chrome extension and may have different permissions or something similar. – freeall Sep 17 '12 at 13:31
  • I guess the keyCode is 0 because you are passing 6th argument false, you should pass the keyCode of the char which you want to trigger, see on the [MDN documentation](https://developer.mozilla.org/en-US/docs/DOM/KeyboardEvent#initKeyboardEvent()) – haynar Sep 17 '12 at 13:32
  • @haynar The sixth argument is a string, and it sets only the `keyIdentifier` property (at least that's what it does in Chrome). I have no idea what that property is used for. – apsillers Sep 17 '12 at 13:34
  • then maybe [this post](http://stackoverflow.com/questions/10455626/keydown-simulation-in-chrome-fires-normally-but-not-the-correct-key) will help you? – haynar Sep 17 '12 at 13:36
  • I have updated the question to include something I discovered by console.log the event before it's dispatched. – freeall Sep 17 '12 at 13:38
  • I saw that, but as I understood from the post mentioned in previous comment you should use something like `Object.defineProperty()` to ake it work, it is some kind of hack – haynar Sep 17 '12 at 13:40
  • @haynar Strange behavior here. When I use defineProperty I can actually make the console.logged object look correct, but for some reason it's still not fired. (Just as a side note, I use setTimeout to make sure that the elements are actually focussed and all that). – freeall Sep 17 '12 at 13:54
  • @apsillers That's also what I noticed with the 6th argument. It was reflected in the KeyboardEvent, but keyIdentifier didn't seem to change anything in the end result. – freeall Sep 17 '12 at 13:56
  • really strange... actually I don't know what is the problem, maybe some kind of Chromium bug? – haynar Sep 17 '12 at 13:57

1 Answers1

0

This is a bug in WebKit: https://bugs.webkit.org/show_bug.cgi?id=16735

30char

int3
  • 12,861
  • 8
  • 51
  • 80