{"id":3429,"date":"2015-01-14T17:39:55","date_gmt":"2015-01-14T23:39:55","guid":{"rendered":"http:\/\/bililite.com\/blog\/?p=3429"},"modified":"2015-01-14T17:42:53","modified_gmt":"2015-01-14T23:42:53","slug":"rethinking-fn-sendkeys","status":"publish","type":"post","link":"https:\/\/bililite.com\/blog\/2015\/01\/14\/rethinking-fn-sendkeys\/","title":{"rendered":"Rethinking $.fn.sendkeys<\/code>"},"content":{"rendered":"

See the demo<\/a>.
\nSee the source code<\/a>, which depends on bililiteRange<\/a>.<\/p>\n

Modern browsers won't let synthetic events (triggered with dispatchEvent<\/a>) execute their default actions (meaning the action that would occur if the event was triggered by a user action). The Event object has a read-only field called isTrusted<\/code> that is false<\/code> for anything but unmodified user-initiated events. These are called \"trusted events\"<\/a>, and I understand the justification, but they go too far. It makes it impossible to implement a virtual keyboard, since triggering keydown or keypress events aren't trusted and won't insert the character (the default action). <\/p>\n

Fortunately, bililiteRange<\/a> and especially bililiteRange.sendkeys<\/a> can insert characters and do other manipulations on the page. So I created a jQuery plugin that uses bililiteRange.sendkeys to catch keydown events and implement them as well as possible.
\nJust include the source code and keydown events get a new default handler (so it can be cancelled by preventDefault) that looks at the key<\/code> field<\/a>. If it is a single character, that character is inserted at the selection. If it is more than one character long, it is assumed to be a sendkeys<\/code> command like ArrowLeft<\/code> and is sent as sendkeys('{'+key+'}')<\/code>.
\nI used the modern Event.key<\/code> rather than Event.which<\/code>, so I don't have to translate keyCodes. If you need to use the old way, see my keymap<\/a> plugin. <\/p>\n

Thus now, $('textarea').trigger({type: 'keydown', key: 'A'})<\/code> will work as expected, as will $('textarea').trigger({type: 'keydown', key: 'Backspace'})<\/code>.<\/p>\n

The actual plugin<\/h3>\n

Under the hood, this uses a very simple jQuery plugin that just calls bililiteRange.sendkeys()<\/code>. It also turns '\\n'<\/code> in the string into '{Enter}'<\/code>, which I thought would be useful but has actually not turned out that way. Putting the '\\n'<\/code> in braces ('{\\n}'<\/code> prevents the replacement.
\nThe plugin itself is:<\/p>\n

$.fn.sendkeys = function (x){\r\n  x = x.replace(\/([^{])\\n\/g, '$1{enter}'); \/\/ turn line feeds into explicit break insertions, but not if escaped\r\n  return this.each( function(){\r\n    bililiteRange(this).bounds('selection').sendkeys(x).select();\r\n    this.focus();\r\n  });\r\n};<\/code><\/pre>\n