Updating an input's value without losing cursor position [duplicate]

I want to mandate that the value of a text box is lowercase using JavaScript. I've tried the code below, but the cursor jumps to the end of the input every time you press a key. How can I avoid this?

    $(this).val( $(this).val().toLowerCase() );


$("#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);


This actually works with CSS as well:


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


Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.