Stop Cursor from Jumping to End of Input Field in JavaScript Replace

Stop cursor from jumping to end of input field in javascript replace

You'll have to manually put the cursor back where you want it. For IE9, set .selectionStart and .selectionEnd (or use .setSelectionRange(start, end)). For IE8 and earlier, use .createTextRange() and call .moveStart() on the text range.

Input cursor jumps to end of input field on input event

If you (or Vue) copy a new value into an input, the cursor will be set to the end of the input. If you want to retain the previous position, you will need to capture the position, make the change, then on the $nextTick restore the position.

Also note that if you are going to set this.input in the handler, there's no point in your using v-model, too. It's also unlikely that saving the event is sensible, but you can.

new Vue({  el: "#app",  data() {    return {      input: null,      event: null    }  },  methods: {    handleInput(e) {      const el = e.target;      const sel = el.selectionStart;      const upperValue = el.value.toUpperCase();
      el.value = this.input = upperValue;      this.event = e;      this.$nextTick(() => {        el.setSelectionRange(sel, sel);      });    }  }});

#app {  background: #fff;  border-radius: 4px;  padding: 20px;  transition: all 0.2s;}
input {  margin-bottom: 20px;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script><div id="app">  <input type="text" @input="handleInput">  <p>{{ event ? event.target.value : null }}</p>  <p>    {{input}}  </p></div>

Updating an input's value without losing cursor position

$("#beLowerCase").on('input', function(){

    // store current positions in variables
    var start = this.selectionStart,
        end = this.selectionEnd;

    this.value = this.value.toLowerCase();

    // restore from variables...
    this.setSelectionRange(start, end);
});

(fiddle)

---

This actually works with CSS as well:

#beLowerCase{
  text-transform:lowercase;
}

And server can take care of the actual lower-casing...

Stop cursor jumping when formatting number in React

An easy solution for losing cursor/caret position in the React's <input /> field that's being formatted is to manage the position yourself:

    onChange(event) {

      const caret = event.target.selectionStart
      const element = event.target
      window.requestAnimationFrame(() => {
        element.selectionStart = caret
        element.selectionEnd = caret
      })

      // your code
    }

The reason your cursor position resets is because React does not know what kinds of changes you are performing (what if you are changing the text completely to something shorter or longer?) and you are now responsible for controlling the caret position.

Example: On one of my input textfields I auto-replace the three dots (...) with an ellipsis. The former is three-characters-long string, while the latter is just one. Although React would know what the end result would look like, it would not know where to put the cursor anymore as there no one definite logical answer.

How to stop cursor from jumping to beginning/end of textbox on up/down key?

<input type="text" />

$("input:text").keydown(function(e){
   if(e.which == 38 || e.which == 40) 
       e.preventDefault();
});

You can prevent default on the up and down arrow keys.

http://jsfiddle.net/C5ZCE/

---

Related Topics