textarea 获取光标位置和设置光标位置

最新推荐文章于 2023-12-20 00:19:31 发布

haogemr

最新推荐文章于 2023-12-20 00:19:31 发布

阅读量1.4w

点赞数 2

本文链接：https://blog.csdn.net/document_dom/article/details/89020426

版权

获取光标位置

//ctrl 是dom节点
function getCursortPosition (ctrl) 
{
    //获取光标位置函数 
    var CaretPos = 0; 
    // IE Support
    if (document.selection) 
    { 
        ctrl.focus (); // 获取焦点
        var Sel = document.selection.createRange (); // 创建选定区域
        Sel.moveStart('character', -ctrl.value.length); // 移动开始点到最左边位置
        CaretPos = Sel.text.length;                      // 获取当前选定区的文本内容长度
    } 
    // Firefox support (非ie)
    else if (ctrl.selectionStart || ctrl.selectionStart == '0')
    {
        CaretPos =ctrl.selectionStart; // 获取选定区的开始点 
    }
    return CaretPos; 
}

设置光标位置

//ctrl 是dom节点，pos 是要定位到的位置
function setCaretPosition(ctrl, pos)
{
    //设置光标位置函数 
    if(ctrl.setSelectionRange)   //非ie
    {
        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();                      // 选定当前区域
    } 
}

有一个场景，在微软雅黑字体下，三个空格大概占一个汉字字符的宽度，现在改为两个空格占一个汉字的宽度，用&ensp;代替。由于textarea不解析转义字符，所以做一个隐藏的div，先让div解析，然后再把内容取回来放入textarea中即可。由于会出现在一段话中间插入空格，所以用到了光标的获取和设置。
代码如下：

<textarea id="textarta" cols="30" rows="10"></textarea>
<div id="div" style="display: none"></div>

//在非ie浏览器下
//用jq写的代码
$('#textarea').keyup(function (e) {
    //敲入空格时
    if (e.keyCode == 32) {
        var index = $(this)[0].selectionStart; //获取光标位置
        var text = $(this).val();
        text = text.replace('/ /', '&ensp;');
        var html = $('#div').html(text).text();
        $(this).val(html);
        //设置光标位置
        //$(this)[0].focus();
        $(this)[0].setSelectionRange(index, index);
    }
});