zoukankan      html  css  js  c++  java
  • 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>

    作者:Olar Tan
    出处:http://www.cnblogs.com/olartan
    ♪:没有做不到的 只有偷懒而错过的 ♪

  • 相关阅读:
    架构阅读笔记9
    架构阅读笔记8
    架构阅读笔记7
    架构阅读笔记6
    架构阅读笔记5
    git安装使用详解
    mysql主从
    人定胜天
    jquery即点击改
    无限极分类/数组处理
  • 原文地址:https://www.cnblogs.com/olartan/p/2657986.html
Copyright © 2011-2022 走看看