alexan0308,
<!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;
for (var i=0; i<elems.length; i++) {
var el = elems[i];
el.addEventListener("click", function() {
var inputs = this.getElementsByTagName("input");
if (inputs.length > 0) return;
if (!newInput) {
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 ;
}, false)
}
newInput.value = this.innerHTML;
this.innerHTML = "";
this.appendChild(newInput);
newInput.focus();
newInput.select()
}.bind(el), false);
};
</script>
</body>
</html>