Rectangle 27 0

javascript Simulate shift + 1 keyboard event and retrieve it in a event handler?


Syn.type('[shift]![shift-up]', 'textInput2');
var e = crossBrowser_initKeyboardEvent("keypress", {"key": 1, "char": "!", shiftKey: true})
document.getElementById('textInput2').dispatchEvent(e);

Apparently it's pretty hard to get it working cross-browser and this led me down a rabbit-hole of trying different things. First I looked at this question: Is it possible to simulate key press events programmatically? but that didn't work correctly in chrome, then I tried various combinations of events and values based on their documentation without much more success. Then I found this question: Firing a keyboard event on Chrome which led me to this code.

Here's the fiddle, maybe someone else can make the final jump.

OK, you're correct Syn doesn't do that correctly, and I can guess why -- the browser can't tell your keyboard layout (see here: detect keyboard layout with javascript) so it really can't tell what you should get for Shift+1, so it just gives you a '1'.

Pasting that code into the JS and then calling it with:

So, can you do it in raw JavaScript? I can get close.

Will give the output you expect. However, it doesn't actually write the value into the input box. Of course you could fake that and just add the text there as well, I'm not sure if that's a limitation in the way events work or if there's just something wrong with the code. Of course, for test, that might be all you need.

Would work as expected but that doesn't either ... I think that's a bug in Syn.

You would assume that

Note
Rectangle 27 0

javascript Simulate shift + 1 keyboard event and retrieve it in a event handler?


Syn.type('[shift]![shift-up]', 'textInput2');
 // outputs 33 true

I'm using chrome. But I went back and tested it and you're correct sometimes it does print 33 false but if you click run a few times it prints 33 false, 33 true, 33 true, 33 false, 33 true. So I went and had a look at the tests here github.com/bitovi/syn/blob/ and he's using a settimeout like here jsfiddle.net/2zsNV/2. I'm not sure why this is happening but Ill have a look into it.

My console shows me 33 false on your fiddle. Which browser are you using?

Setting a timeout will make it work, not sure why, but it does: http://jsfiddle.net/2zsNV/5/

You can see that they simulate a capital 'A' by doing '[shift]A[shift-up]'. Syn simply creates an event and passes and sets the value. It doesn't simulate the lower level keyboard interaction.

jsfiddle.net/2zsNV/5. I'm not sure what the problem but seems by defering it to the next event cycle makes it work

Note
Rectangle 27 0

javascript Simulate shift + 1 keyboard event and retrieve it in a event handler?


Syn.type('[shift]![shift-up]', 'textInput2');
 // outputs 33 true

I'm using chrome. But I went back and tested it and you're correct sometimes it does print 33 false but if you click run a few times it prints 33 false, 33 true, 33 true, 33 false, 33 true. So I went and had a look at the tests here github.com/bitovi/syn/blob/ and he's using a settimeout like here jsfiddle.net/2zsNV/2. I'm not sure why this is happening but Ill have a look into it.

My console shows me 33 false on your fiddle. Which browser are you using?

Setting a timeout will make it work, not sure why, but it does: http://jsfiddle.net/2zsNV/5/

You can see that they simulate a capital 'A' by doing '[shift]A[shift-up]'. Syn simply creates an event and passes and sets the value. It doesn't simulate the lower level keyboard interaction.

jsfiddle.net/2zsNV/5. I'm not sure what the problem but seems by defering it to the next event cycle makes it work

Note
Rectangle 27 0

javascript Simulate shift + 1 keyboard event and retrieve it in a event handler?


Syn.type('[shift]![shift-up]', 'textInput2');
var e = crossBrowser_initKeyboardEvent("keypress", {"key": 1, "char": "!", shiftKey: true})
document.getElementById('textInput2').dispatchEvent(e);

Apparently it's pretty hard to get it working cross-browser and this led me down a rabbit-hole of trying different things. First I looked at this question: Simulate JavaScript Key Events but that didn't work correctly in chrome, then I tried various combinations of events and values based on their documentation without much more success. Then I found this question: Firing a keyboard event on Chrome which led me to this code.

Here's the fiddle, maybe someone else can make the final jump.

OK, you're correct Syn doesn't do that correctly, and I can guess why -- the browser can't tell your keyboard layout (see here: detect keyboard layout with javascript) so it really can't tell what you should get for Shift+1, so it just gives you a '1'.

Pasting that code into the JS and then calling it with:

So, can you do it in raw JavaScript? I can get close.

Will give the output you expect. However, it doesn't actually write the value into the input box. Of course you could fake that and just add the text there as well, I'm not sure if that's a limitation in the way events work or if there's just something wrong with the code. Of course, for test, that might be all you need.

Would work as expected but that doesn't either ... I think that's a bug in Syn.

You would assume that

Note