jq inputのカーソルを取得し、カーソルの位置を位置決めする

最近、ユーザーが入力ボックスにテキストを入力するたびに、入力する文字ごとに大文字に変換する必要があります.
簡単そうに見えますが、入力後に文字を挿入して文字を削除すると、
文字を追加または削除するたびにinputボックスのカーソルが文字の一番後ろに自動的に走って、頭が痛いです.
以下、ネットで探した様々な資料、整理のいくつかの方法は、いくつかの試みを経てやっと解決され、記録され、この方法はjqueryに依存しています.
コメントした部分は自分で削除できます.以下はdemoです.

    
    
    






    $("#demo").on("keyup", function(e) {
        if(e.keyCode==37||e.keyCode==39){
            return;
        }
        var $this = $(this);
        var val = $this.val();
        console.log($(this).getCursorPosition())
        //   input                ，                
        var i = $(this).getCursorPosition()
        //          ，  input     ，                
        $this.val(val.toUpperCase());
        //                    
        setCaretPosition($(this)[0],i)
    })


 //      
    (function ($, undefined) {
        $.fn.getCursorPosition = function () {
            var el = $(this).get(0);
            var pos = 0;
            if ('selectionStart' in el) {
                pos = el.selectionStart;
            } else if ('selection' in document) {
                el.focus();
                var Sel = document.selection.createRange();
                var SelLength = document.selection.createRange().text.length;
                Sel.moveStart('character', -el.value.length);
                pos = Sel.text.length - SelLength;
            }
            return pos;
        }
    })(jQuery);
    /*
        
    */
    function setCaretPosition(ctrl, pos){
        if(ctrl.setSelectionRange)
        {
            ctrl.focus();
            ctrl.setSelectionRange(pos,pos);
        }
        else if (ctrl.createTextRange) {
            var range = ctrl.createTextRange();
            range.collapse(true);
            range.moveEnd('character', pos);
            range.moveStart('character', pos);
            range.select();
        }
    }