Input same width as placeholder

Input same width as placeholder

by Timar

HTML

<p>____Javascript____</p>
<input id='input-1' placeholder="The span element decides the width of the input! Try It...">
<span id="input-1-placeholder" class="hide placeholder">The span element decides the width of the input! Try It...</span>
<p>________CSS_______</p>

<span class="input-container">
  <span class="space-keeper">
  sidooo
  </span>
  <input type="text">
</span>

SCSS

// make sure 
input, span {
font-family: sans-serif;
font-size: 14px
}
input {
  display: block;
}

.placeholder {
}

.hide {
  height: 0px;
  opacity: 1; 
}

// turn opacity to 0 to hide it

.input-container {
    position: relative;
    input {
      display: inline;
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      color: #338c99;
      margin: 0;
      background: #00000000
      border: 0;
    }
}

JavaScript

var input = document.getElementById('input-1');
var placeholder =  document.getElementById('input-1-placeholder'); // measure width of same text as placeholder
input.style.width = placeholder.offsetWidth + "px"