title: Javascript to change input value without overriding value
body: <p>I'm looking to change the value of an input <strong>without</strong> setting <code>element.value</code>. That is to say edit the value without replacing the entire value in the element.</p>
  
  <p>For example, removing the first character from the input field:</p>
  
  <p><code>this.value.substring(1)</code> returns a value instead of modifying the string directly, so no effect on the value there. </p>
  
  <p>I've tried treating the string like an array, but neither <code>this.value.shift()</code> nor <code>Array.prototype.shift.apply(this.value, [])</code> work, which isn't too surprising. </p>
  
  <hr>
  
  <p>The ultimate reason here is to change input value without affecting caret position. Yes, I know I can manually set caret position after setting input value, but that creates its own buggy behavior I'm attempting to circumvent altogether. </p>
  
  <p>Again, change value (remove or insert a character at any given position) in a text input:</p>
  
  <p><strong>Without</strong> setting element.value directly</p>
  
  <p><strong>Without</strong> setting or modifying caret position</p>
  
  <p>Is this even possible? </p>