html元素contenteditable属性如何定位光标和设置光标

2016-07-05 08:39:00

最近在山寨一款网页微信的产品，对于div用contenteditable属性做的编辑框有不少心得，希望可以帮到入坑的同学。

废话不多说了，我们先来理解一下HTML的光标对象是如何工作的，后面我会贴完整的DEMO代码，不用急，先去理解，才能做出更加好的输入体验。

在HTML里面，光标是一个对象，光标对象是只有当你选中某个元素的时候才会出现的。

当我们去点击一个输入框的时候，实际上它会产生一个选中对象-selection（就是我们可以看到的文字变成蓝色的那个区域），selection在火狐浏览器可以直接用 window.getSelection()获取，在HTML里面，selection只有一个的，并且selection是一个区域，你可以想象成一个长方形，它是有开始和结束的

当你点击一个输入框，或者你切换到别的输入框，selection是会跟着变化的。光标就是在selection里面，光标叫做range，是一个片段区域，和selection一样，有开始点，和结束点，当我们对文字按下左键向右拉的时候，就看到了文字变成蓝色，那个就是光标的开始和结束，当我们直接点一下的时候，光标在闪，其实只是开始和结束点重叠了。

OK，现在我们来实际操作光标了。直接看完整的代码，然后看效果吧。

    # edit{height:500px;width:500px;border:1px solid red;}    发送表情        var sendEmoji = document.getElementById('sendEmoji')        // 定义最后光标对象        var lastEditRange;        // 编辑框点击事件        document.getElementById('edit').onclick = function() {            // 获取选定对象            var selection = getSelection()            // 设置最后光标对象            lastEditRange = selection.getRangeAt(0)        }        // 编辑框按键弹起事件        document.getElementById('edit').onkeyup = function() {            // 获取选定对象            var selection = getSelection()            // 设置最后光标对象            lastEditRange = selection.getRangeAt(0)        }        // 表情点击事件        document.getElementById('sendEmoji').onclick = function() {            // 获取编辑框对象            var edit = document.getElementById('edit')            // 获取输入框对象            var emojiInput = document.getElementById('emojiInput')            // 编辑框设置焦点            edit.focus()            // 获取选定对象            var selection = getSelection()            // 判断是否有最后光标对象存在            if (lastEditRange) {                // 存在最后光标对象，选定对象清除所有光标并添加最后光标还原之前的状态                selection.removeAllRanges()                selection.addRange(lastEditRange)            }            // 判断选定对象范围是编辑框还是文本节点            if (selection.anchorNode.nodeName != '# text') {                // 如果是编辑框范围。则创建表情文本节点进行插入                var emojiText = document.createTextNode(emojiInput.value)                if (edit.childNodes.length > 0) {                    // 如果文本框的子元素大于0，则表示有其他元素，则按照位置插入表情节点                    for (var i = 0; i

关键字：JavaScript, html5, selection, 光标

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处。如若内容有涉嫌抄袭侵权/违法违规/事实不符，请点击举报进行投诉反馈！