Hacking at 0300

This post is obsolete; the $.keymap has changed significantly. Documentation is now at http://bililite.com/blog/2015/01/12/rethinking-keymap/.

I've been playing around with creating an online editor, and one thing it needs is keyboard shortcuts. Control keys and the like don't register keypress events, so I have to use keydown to get the event.which (and I have to use jQuery to normalize that across browsers), and then I have a random keyboard code and a bunch of modifier key flags to work with. The W3C once tried to rationalize all this, but no one picked up on it. So I wrote a jQuery plugin to turn the event into a friendlier string (using a notation based on Microsoft's sendkeys). Thus:

• Pressing the 'a' key gives $.keymap(event) == 'a'
• Pressing the 'a' key with shift held gives $.keymap(event) == 'A'
• Pressing the 'a' key with control held gives $.keymap(event) == '^A'
• Pressing the 'a' key with alt held gives $.keymap(event) == '%A'
• Pressing the 'a' key with control and alt held gives $.keymap(event) == '^%A'
• Pressing the 'Esc' key gives $.keymap(event) == '{esc}'
• Pressing the 'Esc' key with shift held gives $.keymap(event) == '+{esc}'
• Pressing the '*' key on the numeric keypad gives $.keymap(event) == '{multiply}'
• Pressing the '1' key on the numeric keypad with control held gives $.keymap(event) == '^{1}'

Download the code.

See the demo.

One thing I wanted to add to my bililiteRange was the ability to scroll the range into view without changing the selection. As with all things having to do with ranges, there's no consistent way to do it, and Internet Explorer does it best (this is the only time you'll hear me say that).

Edited 2014-02-27 to add the indentation code.

I created a collection of useful plugins for my bililiteRange, for more sophisticated manipulations. Now you can search the element with a regular expression, and you can keep the range "live", adjusting it when the text is edited.

Download the code.

See the demo. (The dynamic highlighting is off by a few pixels in iOS Safari. I'm still working on that)

I've been working on a project that uses bililiteRange a lot, so I added two improvements: plugins and events.

bililiteRange.fn.myplugin = function() {}; or bililiteRange.extend({ myplugin1: function() {}, myplugin2: function(){} }); creates new functions for a bililiteRange (just like with jQuery).

Also, the text method now triggers an input event on the element. Only works on browsers that implement CustomEvent.