input_span_cursor

by Nic Fontaine

HTML

<script src="https://getfirebug.com/firebug-lite-debug.js"></script>
<input id='input'><br>
<span id='span' contenteditable='true'>&nbsp;</span>

CSS

input {
  display: inline-block;
}
span {
  display: inline-block;
  background: #ddd;
  padding: 10px 20px 10px 10px;
  position: relative;
  color: transparent;
  text-shadow: 0 0 0 #444;
}
span:after {
  content: '';
  width: 5px;
  height: 80%;
  right: 10px;
  position: absolute;
  background: pink;
  top: 50%;
  transform: translateY(-50%);
  opacity: 0;
  animation: cursorBlink 0.8s linear infinite;
}

@keyframes cursorBlink {
  0% { opacity: 0; }
  50% { opacity: 1; }
  100% { opacity: 0; }
}

JavaScript

var i = document.getElementById('input');
var s = document.getElementById('span');
var a = ['16', '18', '8'];
var keyCtrlDown = false;

i.addEventListener('keydown', function(e) {

    p = s.innerHTML;
    
  	if (a.indexOf(e.keyCode.toString()) < 0) {
    	// SPACE
    	if (e.keyCode === 32) {
      	p = s.innerHTML + '&nbsp;';
      	s.innerHTML = p;
      }
      else {
    		k = e.keyCode;
				s.innerHTML = p + String.fromCharCode(k).toLowerCase();
      }
  	
    }
    // BACKSPACE
    else if (e.keyCode === 8) {
    	s.innerHTML = p.substring(0,p.length-1);
    }

  }

});

i.addEventListener('keyup', function(e) {
	keyCtrlDown = false;
});