{"id":3432,"date":"2015-01-14T14:03:38","date_gmt":"2015-01-14T20:03:38","guid":{"rendered":"http:\/\/bililite.com\/blog\/?p=3432"},"modified":"2015-01-14T14:03:38","modified_gmt":"2015-01-14T20:03:38","slug":"bililiterange-sendkeys","status":"publish","type":"post","link":"https:\/\/bililite.com\/blog\/2015\/01\/14\/bililiterange-sendkeys\/","title":{"rendered":"bililiteRange.sendkeys<\/code>"},"content":{"rendered":"

bililiteRange.text()<\/code><\/a> works well to insert text into ranges, but I wanted to be able to simulate other keys, ala Microsoft's SendKeys<\/code><\/a>. bililiteRange.sendkeys()<\/code> does exactly that. It basically executes text(string, 'end')<\/code> but interprets any text between braces ('{key}'<\/code>) as a command representing a special key. For security reasons, the browser won't let you do anything outside of the text of the page itself, but I've implemented the following (the key names are from the proposed DOM3 standard<\/a>)::<\/p>\n

\n
Backspace<\/code><\/dt>\n
Delete backwards<\/dd>\n
Delete<\/code><\/dt>\n
Delete forwards<\/dd>\n
ArrowRight<\/code><\/dt>\n
Move the insertion point to the right<\/dd>\n
ArrowLeft<\/code><\/dt>\n
Move the insertion point to the left<\/dd>\n
Enter<\/code><\/dt>\n
Insert a newline, with bililiteRange.insertEOL()<\/code>. Warning:<\/strong> In contenteditable<\/code> elements, Enter<\/code> is flaky and inconsistent across browsers. This is due to the flakiness of contenteditable<\/code> itself; I can't figure out what to do about this.<\/dd>\n<\/dl>\n

For backwards-compatibility with older versions, the following synonyms also work: backspace<\/code>, del<\/code>, rightarrow<\/code>, leftarrow<\/code> and enter<\/code>.<\/p>\n

So, for example, bililiteRange(el).sendkeys('foo')<\/code> replaces the current range with 'foo'<\/code> and sets the range to just after that string. bililiteRange(el).sendkeys('foo{Delete}{ArrowLeft}{ArrowLeft}')<\/code> replaces the current range with 'foo'<\/code>, removes the character just after that string and sets the range to between the 'f' and the 'o'.<\/p>\n

To manipulate the selection, use the usual bililiteRange methods. Thus, to simulate a backspace key, use bililiteRange(el).bounds('selection').sendkeys('{Backspace}').select()<\/code>.
\nTo insert a '{', use an unmatched brace, bililiteRange(el).sendkeys('this is a left brace: {')<\/code>, or {{}<\/code>, as in bililiteRange(el).sendkeys('function() {{} whatever }');<\/code>.<\/p>\n

If anyone knows how to implement an up or down arrow, or page up\/down, please let me know.<\/p>\n

Other Commands<\/h3>\n

To make life easier for me, there are a few other \"keys\" that implement specific actions:<\/p>\n

\n
selectall<\/code><\/dt>\n
Select the entire field<\/dd>\n
tab<\/code><\/dt>\n
Insert a '\\t'<\/code> character. $().sendkeys('\\t')<\/code> would work just as well, but there are circumstances when I wanted to avoid having to escape backslashes.<\/dd>\n
newline<\/code><\/dt>\n
Insert a '\\n'<\/code> character, without the mangling that {enter}<\/code> does.<\/dd>\n
selection<\/code><\/dt>\n
Inserts the text of the original selection (useful for creating \"wrapping\" functions, like \"<em>{selection}<\/em>\"<\/code>).<\/dd>\n
mark<\/code><\/dt>\n
Remembers the current insertion point and restores it after the sendkeys<\/code> call. Thus \"<p>{mark}<\/p>\"<\/code> inserts <p><\/p><\/code> and leaves the insertion point between the tags.<\/dd>\n<\/dl>\n

So to wrap the text of a range in HTML tags, use range.sendkeys('<strong>{selection}<\/strong>')<\/code>. To create a hyperlink, use range.sendkeys('<a href=\"{mark}\">{selection}<\/a>')<\/code> which leaves the range between the quote marks rather than at the end.<\/p>\n

Plugins<\/h3>\n

Adding new commands is easy. All the commands are in the bililiteRange.sendkeys<\/code> object, indexed by the name of the command in braces<\/em> (since that made parsing easier). The commands are of the form function (rng, c, simplechar)<\/code> where rng<\/code> is the target bililiteRange, c<\/code> is the command name (in braces), and simplechar<\/code> is a function simplechar (range, string)<\/code> that will insert string<\/code> into the range. range.data().sendkeysOriginalText<\/code> is set to the original text of the range, and rng.data().sendkeysBounds<\/code> is the argument for bililiteRange.bounds()<\/code> that will be used at the end.<\/p>\n

So, for example: <\/p>\n

bililiteRange.sendkeys['{tab}'] = function (range, c, simplechar) { simplechar(rng, '\\t') };\r\nbililiteRange['{Backspace}'] = function (range, c, simplechar){\r\n  var b = rng.bounds();\r\n  if (b[0] == b[1]) rng.bounds([b[0]-1, b[0]]); \/\/ no characters selected; it's just an insertion point. Remove the previous character\r\n  rng.text('', 'end'); \/\/ delete the characters and update the selection\r\n};\r\nbililiteRange.sendkeys['{selectall}'] = function (range, c, simplechar) { rng.bounds('all') };\r\n<\/code><\/pre>\n
So to have a reverse-string command:<\/p>\n
bililiteRange['{reverse}'] = function (range, c, simplechar){\r\n  simplechar(range, range.sendkeysOriginalText.split('').reverse().join(''));\r\n};<\/code><\/pre>\n
Or, to annoy the anti-WordPress crowd<\/a>, a Hello, Dolly<\/a> command:<\/p>\n
bililiteRange['{dolly}'] = function (range, c, simplechar){\r\n  var lyrics = [\r\n    \"Hello, Dolly\",\r\n    \"Well, hello, Dolly\",\r\n    \"It's so nice to have you back where you belong\",\r\n    \"You're lookin' swell, Dolly\",\r\n    \"I can tell, Dolly\",\r\n    \"You're still glowin', you're still crowin'\",\r\n    \"You're still goin' strong\"];\r\n  simplechar (range, lyrics[Math.floor(Math.random() * lyrics.length)];\r\n};<\/code><\/pre>\n
Events<\/h3>\n
After each printing character (not the specials, unless they call simplechar<\/code>) it triggers a keydown<\/code> event with event.which<\/code>, event.keyCode<\/code> and event.charCode<\/code> set to the Unicode value of the character.
\nAfter the entire string is processed, it triggers a custom sendkeys<\/code> event with event.which<\/code> set to the original string. <\/p>\n","protected":false},"excerpt":{"rendered":"
bililiteRange.text() works well to insert text into ranges, but I wanted to be able to simulate other keys, ala Microsoft's SendKeys. bililiteRange.sendkeys() does exactly that. It basically executes text(string, 'end') but interprets any text between braces ('{key}') as a command representing a special key. For security reasons, the browser won't let you do anything outside […]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[18,10],"tags":[],"_links":{"self":[{"href":"https:\/\/bililite.com\/blog\/wp-json\/wp\/v2\/posts\/3432"}],"collection":[{"href":"https:\/\/bililite.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/bililite.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/bililite.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/bililite.com\/blog\/wp-json\/wp\/v2\/comments?post=3432"}],"version-history":[{"count":12,"href":"https:\/\/bililite.com\/blog\/wp-json\/wp\/v2\/posts\/3432\/revisions"}],"predecessor-version":[{"id":3444,"href":"https:\/\/bililite.com\/blog\/wp-json\/wp\/v2\/posts\/3432\/revisions\/3444"}],"wp:attachment":[{"href":"https:\/\/bililite.com\/blog\/wp-json\/wp\/v2\/media?parent=3432"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/bililite.com\/blog\/wp-json\/wp\/v2\/categories?post=3432"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/bililite.com\/blog\/wp-json\/wp\/v2\/tags?post=3432"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}