Skip to content

Instantly share code, notes, and snippets.

@cyberfox
Created June 3, 2015 07:50
Show Gist options
  • Save cyberfox/885d204738c99ef58939 to your computer and use it in GitHub Desktop.
Save cyberfox/885d204738c99ef58939 to your computer and use it in GitHub Desktop.
Binary entry HTML+CSS+JavaScript
<!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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment