textarea元素獲取焦點光標定位最后一個字符

html元素中textarea就是一個雞肋, 其獲取焦點光標無法定位到最后一個字符. 筆者在項目中有一個簡易的富文本框, 要求用戶即可以輸入字符同時支持表情符。當用選擇表情后textarea獲取焦點, 在瀏覽器chrome下面光標始終停留在textarea首位, 結論是各個瀏覽器對textare元素的focus實現有所差異

解決方案如下：

<script type="text/javascript">
function moveCaretToEnd(el) {
    if (typeof el.selectionStart == "number") {
        el.selectionStart = el.selectionEnd = el.value.length;
    } else if (typeof el.createTextRange != "undefined") {
        el.focus();
        var range = el.createTextRange();
        range.collapse(false);
        range.select();
    }
}

var textarea = document.getElementById("test");
textarea.onfocus = function() {
    moveCaretToEnd(textarea);

    // Work around Chrome's little problem
    window.setTimeout(function() {
        moveCaretToEnd(textarea);
    }, 1);
};
</script>

<textarea id="test">Something</textarea>