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>
posted @ 2012-08-27 09:21  T#S  阅读(5304)  评论(0编辑  收藏  举报