cyberfox/binary.html

## binary.html
<!DOCTYPE html>
<html>
  <head>
    <title>Binary Entry JavaScript</title>
    <style type="text/css">
.box {
  border: 1px solid black;
  height: 32px;
  width: 32px;
  font-size: 24px;
  font-family: monospace;
  text-align: center;
  display: inline-block;
}
    </style>
  </head>

  <body>
    <h1>Stuff goes here.</h1>

    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
&nbsp;
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>

    <script type="application/javascript">
function advance(obj) {
  var idVal = obj.id.substr(3) * 1.0;
  var prior = document.getElementById("bit" + (idVal + 1));
  if(prior == null) {
    prior = document.getElementById("bit0");
  }
  setTimeout(function() {
      prior.focus();
      var selection = window.getSelection();
      var range = document.createRange();
      range.selectNodeContents(prior);
      selection.removeAllRanges();
      selection.addRange(range);
  }, 100);
}

var boxes = document.getElementsByClassName('box');

for(var i = 0; i < boxes.length; i++) {
  var box = boxes[i];
  box.id = "bit"+((boxes.length - 1) - i);
  box.setAttribute("contentEditable", true);
  box.onkeydown = function(event) {
    if(event.metaKey && event.which == 82) return;

    if([8, 9, 46, 37, 39].indexOf(event.which) == -1) {
      var empty = (this.innerText.length == 0);

      var selection = window.getSelection();
      var all_selected = (selection != null
         && selection.baseNode.parentElement.id == this.id
         && selection.rangeCount == this.innerText.length);

      result = ((empty || all_selected) && (event.which == 48 || event.which == 49));

      if(result) {
        advance(this);
      } else {
        event.preventDefault();
      }
    }
  };
}

document.getElementById("bit0").focus();
    </script>
  </body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>Binary Entry JavaScript</title>
	<style type="text/css">
	.box {
	border: 1px solid black;
	height: 32px;
	width: 32px;
	font-size: 24px;
	font-family: monospace;
	text-align: center;
	display: inline-block;
	}
	</style>
	</head>

	<body>
	<h1>Stuff goes here.</h1>

	<div class="box"></div>
	<div class="box"></div>
	<div class="box"></div>
	<div class="box"></div>

	<div class="box"></div>
	<div class="box"></div>
	<div class="box"></div>
	<div class="box"></div>

	<script type="application/javascript">
	function advance(obj) {
	var idVal = obj.id.substr(3) * 1.0;
	var prior = document.getElementById("bit" + (idVal + 1));
	if(prior == null) {
	prior = document.getElementById("bit0");
	}
	setTimeout(function() {
	prior.focus();
	var selection = window.getSelection();
	var range = document.createRange();
	range.selectNodeContents(prior);
	selection.removeAllRanges();
	selection.addRange(range);
	}, 100);
	}

	var boxes = document.getElementsByClassName('box');

	for(var i = 0; i < boxes.length; i++) {
	var box = boxes[i];
	box.id = "bit"+((boxes.length - 1) - i);
	box.setAttribute("contentEditable", true);
	box.onkeydown = function(event) {
	if(event.metaKey && event.which == 82) return;

	if([8, 9, 46, 37, 39].indexOf(event.which) == -1) {
	var empty = (this.innerText.length == 0);

	var selection = window.getSelection();
	var all_selected = (selection != null
	&& selection.baseNode.parentElement.id == this.id
	&& selection.rangeCount == this.innerText.length);

	result = ((empty \|\| all_selected) && (event.which == 48 \|\| event.which == 49));

	if(result) {
	advance(this);
	} else {
	event.preventDefault();
	}
	}
	};
	}

	document.getElementById("bit0").focus();
	</script>
	</body>
	</html>