input_span_cursor_02

by Nic Fontaine

HTML

<div>
<input id='search-input'><br>
<span id='input-fake' contenteditable='true'></span>
<p id='demo'></p>
</div>

CSS

div {
  position: relative;
}
input {
  display: inline-block;
  color: transparent;
}
span {
  display: inline-block;
  padding: 10px 20px 10px 0;
  position: absolute;
  color: transparent;
  text-shadow: 0 0 0 #444;
  left:10px;
  height: 100%;
  top: 0;
}
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 searchInput = document.getElementById('search-input');
var inputFake = document.getElementById('input-fake');
var rejectArray = ['16', '18', '8', '17'];
// var demo = document.getElementById('demo');
var keyCtrlDown = false;

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

		// demo.innerHTML = keyCtrlDown;
    
    // CTRL
    if (e.keyCode === 17) {
      keyCtrlDown = true;
    }
    
    if (keyCtrlDown) {
    
      // BACKSPACE & keyCtrlDown HAS BEEN TOGGLED
    	if (e.keyCode === 8) {
      	p = p.replace(/&nbsp;/g, ' ');
      	l = p.lastIndexOf(' ');
      	p = p.substring(0,l);
      	//demo.innerHTML = p;
      	inputFake.innerHTML = p;
    	}
      
    }
    
    else {

      // CACHE VALUE OF SPAN
      p = inputFake.innerHTML;
      // IF NOT IN ARRAY
      if (rejectArray.indexOf(e.keyCode.toString()) < 0) {

        // SPACE
        //if (e.keyCode === 32) {
          //p = p + '\xa0';
          //inputFake.innerHTML = p;
        //}
        //else {
          k = e.keyCode;
          inputFake.innerHTML = p + String.fromCharCode(k).toLowerCase();
        //}

      }
      // BACKSPACE
      else if (e.keyCode === 8) {
        inputFake.innerHTML = p.substring(0,p.length-1);
      }
    
    }
    // ENTER
    if (e.keyCode === 13) {
    	q = p.replace(/&nbsp;/g, ' ');
    	window.open('https://www.google.com/#q=' + q);
    }

});

searchInput.addEventListener('keypress', function(e) {
        // SPACE
        if (e.keyCode === 32) {
          p = p + ' ';
          inputFake.innerHTML = p;
        }
});

searchInput.addEventListener('keyup', function(e) {
	if (e.keyCode === 17) {
  	keyCtrlDown = false;
  }
});