(function() {
    var inputBox, oldVal = '';
    var keypress = function(e) {
        var val = inputBox.value;
        if (val.length > oldVal.length) {
            // for browsers that don't support selectionStart, too bad,
            //   digraphs only work at the end
            var pos = inputBox.selectionStart || val.length;
            var digraph = digraphs[val.substr(pos - 2, 2)];
            if (digraph) {
                val = val.slice(0, pos - 2) + digraph + val.slice(pos);
                inputBox.value = val;
            }
        }
        oldVal = val;
    };

    var digraphs = {};

    window.addEventListener('load', function() {
        var builderReq = new XMLHttpRequest();
        builderReq.addEventListener('load', function() {
            document.body.innerHTML = this.responseText;
            [].slice.call(document.getElementsByTagName('button'))
                    .forEach(function(btn) {
                btn.addEventListener('click', function() {
                    oldVal = inputBox.value += btn.innerText;
                    inputBox.focus();
                });
            });

            inputBox = document.createElement('input');
            inputBox.id = 'inputBox';
            inputBox.spellcheck = false;
            inputBox.addEventListener('keyup', keypress);
            document.body.appendChild(inputBox);
        });
        builderReq.open('GET', 'builder.html');
        builderReq.send();

        var digraphsReq = new XMLHttpRequest();
        digraphsReq.addEventListener('load', function() {
            this.responseText.split('\n').forEach(function(digraph) {
                var chunks = digraph.match(/\S{8}/g);
                // failsafe
                if (!chunks || chunks.length != 3) return;
                chunks = chunks.map(function(hex) {
                    return String.fromCharCode(parseInt(hex, 16));
                });
                digraphs[chunks[0] + chunks[1]] = chunks[2];
            });
        });
        digraphsReq.open('GET', 'digraphs.txt');
        digraphsReq.send();
    });
})();

@@ -27,21 +27,8 @@
 tBox
-, oldVal = ''
 ;%0A  
@@ -94,170 +94,70 @@
 alue
-;%0A        if (val.length %3E oldVal.length) %7B%0A            // for browsers that don't support selectionStart, too bad,%0A            //   digraphs only work at the end
+,%0A            key = String.fromCharCode(e.which %7C%7C e.keyCode),
 %0A   
@@ -165,20 +165,16 @@
         
-var 
 pos = in
@@ -208,17 +208,17 @@
 l.length
-;
+,
 %0A       
@@ -218,28 +218,24 @@
             
-var 
 digraph = di
@@ -262,20 +262,22 @@
 s - 
-2, 2)%5D;%0A    
+1, 1) + key%5D;%0A
     
@@ -291,32 +291,60 @@
 (digraph) %7B%0A    
+        e.preventDefault();%0A
             val 
@@ -364,17 +364,17 @@
 , pos - 
-2
+1
 ) + digr
@@ -399,36 +399,32 @@
 s);%0A            
-    
 inputBox.value =
@@ -429,20 +429,16 @@
  = val;%0A
-    
         
@@ -443,40 +443,8 @@
   %7D%0A
-        %7D%0A        oldVal = val;%0A
     
@@ -856,70 +856,8 @@
 ) %7B%0A
-                    oldVal = inputBox.value += btn.innerText;%0A
     
@@ -1108,10 +1108,13 @@
 'key
-u
 p
+ress
 ', k
@@ -1494,36 +1494,8 @@
 g);%0A
-                // failsafe%0A
     
@@ -1548,16 +1548,29 @@
  return;
+  // failsafe
 %0A       

Improve web port digraph behavior