Dynamic Resizing Inputs

by Seth Van Booven

HTML

<input id="text" type="text" size="1"/>

CSS

input {
        resize: horizontal;
    }
    
    input:active {
        width: auto;   
    }
    
    input:focus {
        min-width: 10px;
    }

JavaScript

resize = function(e) {
	
  var element = e.target;
  
	var cs = getComputedStyle(element);
  var offset = 0;

  element.style.width = "0";
  
  if (cs.boxSizing == "border-box") {
				offset = element.offsetWidth;
			}
			else if (cs.boxSizing == "padding-box") {
				offset = element.clientWidth;
			}
      
  element.scrollLeft = 1e+10;

  var width = Math.max(element.scrollLeft + offset, element.scrollWidth - element.clientWidth);

  element.style.width = width + "px";
}

document.body.addEventListener("input", resize);