contenteditable="true"な要素を矢印キーで移動可能にする - 素人がプログラミングを勉強していたブログ

const MOVE_PX = 10;
document.addEventListener('keypress',
function(e) {
  var elem = document.evaluate('//*[@_moz_resizing="true" and @_moz_abspos]',
                               document.body,
                               null,
                               XPathResult.FIRST_ORDERED_NODE_TYPE,
                               null)
                     .singleNodeValue;
  if (elem == null) return;
  switch (e.keyCode) {
  case KeyEvent.DOM_VK_LEFT:
    {
      var n = parseInt(getComputedStyle(elem, null).left);
      elem.style.left = n - MOVE_PX + 'px';
      break;
    }
  case KeyEvent.DOM_VK_UP:
    {
      var n = parseInt(getComputedStyle(elem, null).top);
      elem.style.top = n - MOVE_PX + 'px';
      break;
    }
  case KeyEvent.DOM_VK_RIGHT:
    {
      var n = parseInt(getComputedStyle(elem, null).left);
      elem.style.left = n + MOVE_PX + 'px';
      break;
    }
  case KeyEvent.DOM_VK_DOWN:
    {
      var n = parseInt(getComputedStyle(elem, null).top);
      elem.style.top = n + MOVE_PX + 'px';
      break;
    }
  }
},
false);