{"id":470,"date":"2011-07-20T18:28:18","date_gmt":"2011-07-20T18:28:18","guid":{"rendered":"http:\/\/tech.avant.net\/q\/?p=470"},"modified":"2019-06-01T04:45:08","modified_gmt":"2019-06-01T04:45:08","slug":"javascript-keyboard-buffer-part-4","status":"publish","type":"post","link":"https:\/\/tech.avant.net\/q\/javascript-keyboard-buffer-part-4\/","title":{"rendered":"javascript keyboard buffer, part 4"},"content":{"rendered":"<p>Previously, we created a JavaScript keyboard buffer that can edit text in a static html page as well as <a href=\"\/q\/javascript-keyboard-buffer-part-3\/\">play back each key as it was typed<\/a>.<\/p>\n<p>I would like to combine all of this into a single JavaScript include called <a href=\"\/sandbox\/keylogger.js\">keylogger.js<\/a>, and rather than specify each div that I want to edit I&#8217;d like to specify a classname such that all elements of that class will become editable, e.g.,<\/p>\n<pre class=\"sh_html\">&lt;div class=\"editable\"&gt;\nSpam and eggs are fantastic, although on second though...\n&lt;\/div&gt;\n\n&lt;script src=\"keylogger.js\"&gt;&lt;\/script&gt;\n&lt;script type=\"text\/javascript\" defer&gt;&lt;!--\neditableByClassname('editable');\n--&gt;&lt;\/script&gt;\n<\/pre>\n<style>\ndiv.editable a#aclear, div.editable a#areplay { margin-right: 5px; }<\/style>\n<div class=\"editable\">Spam and eggs are fantastic, although on second thought&#8230;<\/div>\n<p><script src=\"\/sandbox\/keylogger.js\"><\/script><br \/>\n<script type=\"text\/javascript\" defer=\"\"><!--\neditableByClassname('editable');\n--><\/script>Please see the example, <a href=\"\/sandbox\/keylogger.html\">keylogger.html<\/a>, that uses multiple editable div&#8217;s in one page.<\/p>\n<p>The editableByClassname(cls) function registers onclick events that will activate the keyboard buffer, editor, and replay functions for every element of the specified class.<\/p>\n<pre class=\"sh_javascript\">\/\/\n\/\/ attach onclick event handlers by classname\nfunction editableByClassname(cls) {\n  editable = $(cls);\n  for (var i = 0; i &lt; editable.length; i++) {\n    editable[i].onclick = initEditable;\n  }\n}\n<\/pre>\n<p>There are two utility functions, $ and $$.  The single $ is a shortcut to <em>document.getElementById<\/em> and the double $$ returns all elements by classname. I.e.,<\/p>\n<pre class=\"sh_javascript\">\/\/\n\/\/ shortcut to getElementById\nfunction $(el) {\n  return document.getElementById(el);\n}\n\n\/\/\n\/\/ a simple getElementsByClassname implementation\nfunction $(cl) {\n  var retnode = [];\n  var myclass = new RegExp('\\\\b'+cl+'\\\\b');\n  var elem = document.getElementsByTagName('*');\n  for (var i = 0; i &lt; elem.length; i++) {\n    var classes = elem[i].className;\n    if (myclass.test(classes)) retnode.push(elem[i]);\n  }\n  return retnode;\n}\n<\/pre>\n","protected":false},"excerpt":{"rendered":"<p>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&#8217;d like [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[12,11,9],"tags":[],"_links":{"self":[{"href":"https:\/\/tech.avant.net\/q\/wp-json\/wp\/v2\/posts\/470"}],"collection":[{"href":"https:\/\/tech.avant.net\/q\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/tech.avant.net\/q\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/tech.avant.net\/q\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/tech.avant.net\/q\/wp-json\/wp\/v2\/comments?post=470"}],"version-history":[{"count":10,"href":"https:\/\/tech.avant.net\/q\/wp-json\/wp\/v2\/posts\/470\/revisions"}],"predecessor-version":[{"id":999,"href":"https:\/\/tech.avant.net\/q\/wp-json\/wp\/v2\/posts\/470\/revisions\/999"}],"wp:attachment":[{"href":"https:\/\/tech.avant.net\/q\/wp-json\/wp\/v2\/media?parent=470"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/tech.avant.net\/q\/wp-json\/wp\/v2\/categories?post=470"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/tech.avant.net\/q\/wp-json\/wp\/v2\/tags?post=470"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}