js获取和设置光标位置input和textare 兼容>=IE7

最新推荐文章于 2022-11-19 18:04:03 发布

约德尔蒙

最新推荐文章于 2022-11-19 18:04:03 发布

阅读量752

点赞数

分类专栏： Js

本文链接：https://blog.csdn.net/gyq04551/article/details/81198892

版权

Js 专栏收录该内容

64 篇文章 0 订阅

订阅专栏

 // 获取光标位置函数 input和textarea通用 谷歌 火狐  --IE7及以上
        function getPositionForCursor(proDom) {//proDom 原生dom对象
            var CaretPos = 0;
            if (document.selection) { // IE  
                proDom.focus();
                var Sel = document.selection.createRange();
                Sel.moveStart('character', -proDom.value.length);
                CaretPos = Sel.text.length;
            } else if (proDom.selectionStart || proDom.selectionStart == '0') {// Firefox 
                CaretPos = proDom.selectionStart;
            }
            return (CaretPos);
        }
        //设置光标位置函数 input和textarea 通用 谷歌 火狐 --IE7及以上
         function setCursorPosition(proDom, int) { //proDom 原生dom对象 ，int number类型；
            if (proDom.setSelectionRange) {
                proDom.focus();
                proDom.setSelectionRange(int, int);
            }
            else if (proDom.createTextRange) {
                var range = proDom.createTextRange();
                range.collapse(true);
                range.moveEnd('character', int);
                range.moveStart('character', int);
                range.select();
            }
        }


//------------------------demo-转载的--------------
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>JavaScript 获取/设置光标位置,兼容Input&&TextArea。</title>
    <style>
            body {
                margin: 32px;
                font-family: Verdana, sans-serif;
                font-size: 13px;
            }
    
            .title {
                font-size: 18px;
                font-weight: bolder;
                margin: 40px 0;
            }
    
            .input {
                width: 50%;
                font-family: Verdana, sans-serif;
                font-size: 13px;
                text-indent: 2px;
            }
        </style>
       
</head>
<body>
    <div class="title">JavaScript 获取/设置光标位置,兼容Input&&TextArea：</div>
    <div class="title">单行文本框</div>
    <p>
        <input class="input" id="textbox" name="textbox" value="Hi,www.jb51.net!!!" />
    </p>

    <input type="button" onclick="alert( getPositionForInput( document.getElementById('textbox') ) )" value="Get Position"> 输入位置:
    <input type="text" id="no1" size="1" />
    <input type="button" onclick="process('no1','textbox');" value="Set Position">

    <div class="title">多行文本框</div>
    <textarea id="zhangdanNum" name="zhangdanNum" style="height:66px;width:246px;overflow:hidden">Hi,CssRain!!!</textarea>
    <input type="button" onclick="alert( getPositionForTextArea( document.getElementById('zhangdanNum') ) )" value="Get Position"> 输入位置:
    <input type="text" id="no2" size="1" />
    <input type="button" onclick="process('no2','zhangdanNum');" value="Set Position">
</body>
</html>
<script> 
    //获取光标位置  
    //单行文本框 
    function getPositionForInput(ctrl) {
        var CaretPos = 0;
        if (document.selection) { // IE Support 
            ctrl.focus();
            var Sel = document.selection.createRange();
            Sel.moveStart('character', -ctrl.value.length);
            CaretPos = Sel.text.length;
        } else if (ctrl.selectionStart || ctrl.selectionStart == '0') {// Firefox support 
            CaretPos = ctrl.selectionStart;
        }
        return (CaretPos);
    }
    //多行文本框 
    function getPositionForTextArea(ctrl) {
        var CaretPos = 0;
        if (document.selection) {// IE Support 
            ctrl.focus();
            var Sel = document.selection.createRange();
            var Sel2 = Sel.duplicate();
            Sel2.moveToElementText(ctrl);
            var CaretPos = -1;
            while (Sel2.inRange(Sel)) {
                Sel2.moveStart('character');
                CaretPos++;
            }
        } else if (ctrl.selectionStart || ctrl.selectionStart == '0') {// Firefox support 
            CaretPos = ctrl.selectionStart;
        }
        return (CaretPos);
    }
    //设置光标位置函数 
    function setCursorPosition(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();
        }
    }
    //test 
    function process(id, targetId) {
        var no = document.getElementById(id).value;
        setCursorPosition(document.getElementById(targetId), no);
    } 
</script>

约德尔蒙

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
js获取和设置光标位置input和textare 兼容>=IE7

// 获取光标位置函数 input和textarea通用谷歌火狐 --IE7及以上 function getPositionForCursor(proDom) {//proDom 原生dom对象 var CaretPos = 0; if (document.selection) { // IE ...
复制链接

扫一扫