定位input的光标，设置光标的位置

最新推荐文章于 2024-08-16 11:55:27 发布

IT 哈

最新推荐文章于 2024-08-16 11:55:27 发布

阅读量4.9k

点赞数

分类专栏： JavaScript知识点 css

原文链接：https://www.cnblogs.com/pengqiangGGG/p/10873815.html

版权

JavaScript知识点同时被 2 个专栏收录

208 篇文章 8 订阅

订阅专栏

css

93 篇文章 2 订阅

订阅专栏

最近遇到一个需求，用户在输入框里输入文本的时候，每输入一个字符都要转换成大写，

看起来比较简单，但是输入完后在中间插入删除的时候，

每添加或者删除一个字符的时候input框的光标自动跑到字符最后面，操作起来很是麻烦

下面在网上找的各种资料，整理的一些方法，经过一些尝试终于解决了，记录下来，此方法依赖于jquery。

注释掉的部分可以自行删除。以下是demo

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
    <title>无标题文档</title>
    <script type="text/javascript" charset="utf8" src="https://code.jquery.com/jquery-3.3.1.js"></script>
</head>
<body>
<input type="text" id="demo">


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

 //获取光标位置

    (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($){
    //     $.fn.extend({
    //         // 获取当前光标位置的方法
    //         getCurPos:function() {
    //             var getCurPos = '';
    //             if ( navigator.userAgent.indexOf("MSIE") > -1 ) {  // IE
    //                 // 创建一个textRange,并让textRange范围包含元素里所有内容
    //                 var all_range = document.body.createTextRange();all_range.moveToElementText($(this).get(0));$(this).focus();
    //                 // 获取当前的textRange,如果当前的textRange是一个具体位置而不是范围,则此时textRange的范围是start到end.此时start等于end
    //                 var cur_range = document.selection.createRange();
    //                 // 将当前textRange的start,移动到之前创建的textRange的start处,这时,当前textRange范围就变成了从整个内容的start处,到当前范围end处
    //                 cur_range.setEndPoint("StartToStart",all_range);
    //                 // 此时当前textRange的Start到End的长度,就是光标的位置
    //                 curCurPos = cur_range.text.length;
    //             } else {
    //                 // 获取当前元素光标位置
    //                 curCurPos = $(this).get(0).selectionStart;
    //             }
    //             // 返回光标位置
    //             return curCurPos;
    //         }
    //     });
    // })(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();
        }
    }

    // $(document).on("input",".mustArriveTimes",function(){
    //     if(event.shiftKey||event.altKey||event.ctrlKey||event.keyCode==16||event.keyCode==17||event.keyCode==18||(event.shiftKey&&event.keyCode==36))
    //         return;
    //     var pos=$(this).getCurPos();//保存原始光标位置
    //     var temp = $(this).val();
    //     $(this).val($(this).val().replace(/[^-+\d]/g,''));
    //     if($(this).val().length > 0){
    //         var afterstr = $(this).val().substr(pos-(temp.length-$(this).val().length),$(this).val().length);
    //         var beforestr = $(this).val().substr(0,pos-1);
    //         $(this).val(beforestr + afterstr);
    //     }
    //     pos=pos-(temp.length-$(this).val().length);//当前光标位置
    //     setCaretPosition($(this)[0],pos);//设置光标
    //     /*if($(this).val().length == 2){
    //         $(this).val($(this).val()+':');
    //     }else if($(this).val().length > 7){ */
    //     //}
    // });

</script>

</body>
</html>

转自https://www.cnblogs.com/pengqiangGGG/p/10873815.html