可编辑div将光标定位到最后

Posted 2020-07-10 前端小刺猬

最近做了一个可以回复留言的页面，主要包括：@、表情功能，一开始使用的是文本域textarea，最后发现这样无法显示表情，后来改成可编辑div，在div中添加contenteditable="true"，则该div即可编辑。

<div contenteditable="true"></div>

在选择表情或者选择@某人后，会经常遇到选择后可编辑div中的光标不见了，或者显示的位置不对，于是在网上找了些方法，现在总结下：

 

function set_focus()
{
    el=document.getElementById(‘guestbook_editor‘);
    //el=el[0];  //jquery 对象转dom对象
    el.focus();
    if($.support.msie)
    {
        var range = document.selection.createRange();
        this.last = range;
        range.moveToElementText(el);
        range.select();
        document.selection.empty(); //取消选中
    }
    else
    {
        var range = document.createRange();
        range.selectNodeContents(el);
        range.collapse(false);
        var sel = window.getSelection();
        sel.removeAllRanges();
        sel.addRange(range);
    }
}

 

调用此方法，可以将光标放在可编辑div的最后。

 

参考地址：http://chwjbn.blog.163.com/blog/static/1038799201310762620681/