{"id":453,"date":"2011-07-20T17:26:28","date_gmt":"2011-07-20T17:26:28","guid":{"rendered":"http:\/\/tech.avant.net\/q\/?p=453"},"modified":"2019-06-01T04:39:53","modified_gmt":"2019-06-01T04:39:53","slug":"javascript-keyboard-buffer-part-2","status":"publish","type":"post","link":"https:\/\/tech.avant.net\/q\/javascript-keyboard-buffer-part-2\/","title":{"rendered":"javascript keyboard buffer, part 2"},"content":{"rendered":"<p>Previously, we created a <a href=\"\/q\/javascript-keyboard-buffer-part-1\/\">javascript keyboard buffer<\/a> and next I&#8217;d like to process that buffer to edit text in a static html page.<\/p>\n<p>Given the following simple html:<\/p>\n<pre class=\"sh_html\">&lt;div id=\"keyboardBufferTest\"&gt;\nSpam and eggs\n&lt;\/div&gt;\n<\/pre>\n<p>I would like the keyboard buffer to modify the text inside that div element.<\/p>\n<p>The following JavaScript function will read the buffer and modify the innerHTML of a named element:<\/p>\n<pre class=\"sh_javascript\">\/\/\n\/\/ append a single character from BUFFER to an elements innerHTML\nvar bp = 0;\nvar ENTITIES = {\n    13 : '\n',\n    38 : '&amp;',\n    60 : '&lt;',\n    62 : '&gt;',\n   222 : \"'\"\n}\nfunction appendChar(el) {\n  if (BUFFER[bp] == 8) {\n    appendBackspace(el);\n  } else if (BUFFER[bp] in ENTITIES) {\n    el.innerHTML += ENTITIES[BUFFER[bp]];\n  } else {\n    el.innerHTML += String.fromCharCode(BUFFER[bp]);\n  }\n  bp++;\n}\nfunction appendBackspace(el) {\n  var endpointer = 1;\n  var plength = el.innerHTML.length;\n  for (var i in ENTITIES) {\n    var entity = ENTITIES[i];\n    var entityCheck = el.innerHTML.substr(plength - entity.length)\n    if (entity == entityCheck) {\n      endpointer = entity.length;\n      break;\n    }\n  }\n  el.innerHTML = el.innerHTML.substr(0, plength - endpointer);\n}\n<\/pre>\n<p>The BUFFER contains unicode values that need to be encoded into readable characters. In the above example the builtin String.fromCharCode() function is used.  The appendChar(el) function simply processes one element at a time from the BUFFER and maintains a buffer pointer so that the BUFFER can be safely read while new keystrokes are recorded.<\/p>\n<p>There is a very simply ENTITIES hash that serves only to maintain basic HTML encoding.<\/p>\n<p>To use this function, simply pass in the element you want modified. This function can be added to the onkey event handler so that changes to a static html page will appear as you type them.<\/p>\n<p>Next, I&#8217;d like to add a <a href=\"\/q\/javascript-keyboard-buffer-part-3\/\">buffer replay<\/a> such that changes to the html can be viewed multiple times exactly as they were typed (keystroke by keystroke).<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Previously, we created a javascript keyboard buffer and next I&#8217;d like to process that buffer to edit text in a static html page. Given the following simple html: &lt;div id=&#8221;keyboardBufferTest&#8221;&gt; Spam and eggs &lt;\/div&gt; I would like the keyboard buffer to modify the text inside that div element. The following JavaScript function will read the [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[9],"tags":[],"_links":{"self":[{"href":"https:\/\/tech.avant.net\/q\/wp-json\/wp\/v2\/posts\/453"}],"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=453"}],"version-history":[{"count":8,"href":"https:\/\/tech.avant.net\/q\/wp-json\/wp\/v2\/posts\/453\/revisions"}],"predecessor-version":[{"id":995,"href":"https:\/\/tech.avant.net\/q\/wp-json\/wp\/v2\/posts\/453\/revisions\/995"}],"wp:attachment":[{"href":"https:\/\/tech.avant.net\/q\/wp-json\/wp\/v2\/media?parent=453"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/tech.avant.net\/q\/wp-json\/wp\/v2\/categories?post=453"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/tech.avant.net\/q\/wp-json\/wp\/v2\/tags?post=453"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}