知乎div编辑器，@功能的光标定位问题

我今天拜读了一下知乎编辑器的js代码，发现那个@功能其实好像可以分为：

获取@符号的位置
清除@符号
在@符号的位置上将将抓取到的字符串x以@x的形式添加进去
将焦点定位到@X上
这四个步骤不知道个人理解得对不对，这个用selection.createRange()是怎么实现的呢？不知如何下手写这个功能。

很艰难地找到了一个能用的代码样例：

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
    <script src="//code.jquery.com/jquery-1.9.1.js"></script>
    <script src="../tpok/js/jquery-ui.min.js"></script>
    <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css">
    <script>




        $(function () {
            var availableTags = [
                "ActionScript",
                "AppleScript",
                "Asp",
                "BASIC",
                "C",
                "C++",
                "Clojure",
                "COBOL",
                "ColdFusion",
                "Erlang",
                "Fortran",
                "Groovy",
                "Haskell",
                "Java",
                "JavaScript",
                "Lisp",
                "Perl",
                "PHP",
                "Python",
                "Ruby",
                "Scala",
                "Scheme"
            ];
            $("#tags").autocomplete({
                source: availableTags,
                close: function(event, ui) {
                    var textObj = document.getElementById("tags");
                    po_Last_Div(textObj);

                }
            });


        });

    </script>
    <script>

    </script>
</head>


<body>
<div class="ui-widget">
    <label for="tags">标签：</label>
    <div style="width:100px;height:50px;background:#ccc;" contenteditable="true" id="tags" ></div>
    <div style="width:100px;height:50px;background:#ccc;" contenteditable="true" id="tags2" >aaaa</div>
</div>
</body>
<script type="text/javascript">

    function po_Last_Div(obj) {
        if (window.getSelection) {//ie11 10 9 ff safari
            obj.focus(); //解决ff不获取焦点无法定位问题
            var range = window.getSelection();//创建range
            range.selectAllChildren(obj);//range 选择obj下所有子内容
            range.collapseToEnd();//光标移至最后
        }
        else if (document.selection) {//ie10 9 8 7 6 5
            var range = document.selection.createRange();//创建选择对象
            //var range = document.body.createTextRange();
            range.moveToElementText(obj);//range定位到obj
            range.collapse(false);//光标移至最后
            range.select();
        }
    }

</script>



</body>
</html>

你说的是吗

var range = document.createRange();
range.selectNode(node); // node is where you need the caret to be (with contenteditable)
range.collapse();

var selection = document.getSelection();

selection.removeAllRanges();
selection.addRange(range);

【热门文章】