javascript - カーソル位置を失うことなく入力値を更新する

Question

JavaScriptを使用して、テキストボックスの値を小文字にすることを義務付けたいと思います。以下のコードを試しましたが、キーを押すたびにカーソルが入力の最後にジャンプします。どうすればこれを回避できますか？

$("#beLowerCase").keyup(function(){
    $(this).val( $(this).val().toLowerCase() );
});

Answer 1

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

（フィドル）

---

これは実際にはCSSでも機能します。

#beLowerCase{
  text-transform:lowercase;
}

そして、サーバーは実際の小文字の処理を行うことができます...