可編輯div將光標定位到最后

最近做了一個可以回復留言的頁面，主要包括：@、表情功能，一開始使用的是文本域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/