Previously, we created a JavaScript keyboard buffer that can edit text in a static html page as well as play back each key as it was typed.

I would like to combine all of this into a single JavaScript include called keylogger.js, and rather than specify each div that I want to edit I’d like to specify a classname such that all elements of that class will become editable, e.g.,

<div class="editable">
Spam and eggs are fantastic, although on second though...
</div>

<script src="keylogger.js"></script>
<script type="text/javascript" defer><!--
editableByClassname('editable');
--></script>

Please see the example, keylogger.html, that uses multiple editable div’s in one page.

The editableByClassname(cls) function registers onclick events that will activate the keyboard buffer, editor, and replay functions for every element of the specified class.

//
// attach onclick event handlers by classname
function editableByClassname(cls) {
  editable = $(cls);
  for (var i = 0; i < editable.length; i++) {
    editable[i].onclick = initEditable;
  }
}

There are two utility functions, $ and $$. The single $ is a shortcut to document.getElementById and the double $$ returns all elements by classname. I.e.,

//
// shortcut to getElementById
function $(el) {
  return document.getElementById(el);
}

//
// a simple getElementsByClassname implementation
function $(cl) {
  var retnode = [];
  var myclass = new RegExp('\\b'+cl+'\\b');
  var elem = document.getElementsByTagName('*');
  for (var i = 0; i < elem.length; i++) {
    var classes = elem[i].className;
    if (myclass.test(classes)) retnode.push(elem[i]);
  }
  return retnode;
}