title: Is there a way to disable default cursor placement when using VueJs?
body: <p>I am creating a time input text field in which you override zeros with the time that you fill in. When removing your filled in numbers the numbers get replaced with zeros.</p>
  
  <p>When changing the bound text the cursor gets moved to the end of the text and I set the cursor back to the place that it should be located with the setSelectionRange method.</p>
  
  <p>I am trying to disable the cursor placement to the end of the text so the cursor does not bounce around, however I cannot seem to find a way to disable this behaviour.</p>
  
  <p>Can anybody help me to better understand the behaviour of the cursor and how I might be able to disable the movement of it?</p>
  
  <p>I tried to create a time input field without the zeroes but whenever I fill in a number somewhere else then the last character I get a jumpy cursor.</p>
  
  <p>In my example I add a one to the text field with every key press.
  You can see the cursor moving to the end of the field before getting placed by the code.</p>
  
  <p>[Fiddle] <a href="https://jsfiddle.net/Banthornes/c6zds1h4/1/" rel="nofollow noreferrer">https://jsfiddle.net/Banthornes/c6zds1h4/1/</a></p>
  
  <pre><code>this.text = this.text + '1'
  
  if(this.cursorLocation &gt; 0)
  {
      this.cursorLocation -= 1
  }
  
  this.$refs.input.setSelectionRange(this.cursorLocation, 
       this.cursorLocation)
  </code></pre>
  
  <p>I tested this in the following browsers: 
  - Chrome
  - Firefox
  - Brave
  - Edge</p>