Теперь со стилями не могу разобраться.
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
</head>
<body><span class="dynamic">1</span>
<span class="dynamic">2</span>
<span class="dynamic">3</span>
<span class="dynamic">4</span>
<span class="dynamic">5</span>
<script>
var elems = document.getElementsByClassName("dynamic"),
newInput = document.createElement("input");
newInput.type = "text";
newInput.maxLength = 1;
newInput.setAttribute("size", 1);
newInput.style.width = "12px";
newInput.addEventListener("blur", function() {
newInput.parentNode.innerHTML = newInput.value ;
newInput.parentNode.style.fontFamily = "Arial";
newInput.parentNode.style.fontSize = "20px";
}, false);
for (var i=0; i<elems.length; i++) {
var el = elems[i];
el.addEventListener("click", function() {
if (this.children.length) return;
newInput.value = this.innerHTML;
this.innerHTML = "";
this.appendChild(newInput);
newInput.focus();
newInput.select()
}.bind(el), false);
};
</script>
</body>
</html>
Нужно в силу ряда причин указать стиль. Не работают строки
newInput.parentNode.style.fontFamily = "Arial";
newInput.parentNode.style.fontSize = "20px";