码迷,mamicode.com
首页 > 其他好文 > 详细

可编辑DIV在获得焦点的时候让光标处于最后

时间:2015-09-08 15:11:05      阅读:110      评论:0      收藏:0      [点我收藏+]

标签:

一个涉及到用户体验的问题~

 

前言

因为要做一个发表心情的窗口,肯定要有插入表情的功能,出现问题之前的做法

1.写一个可编辑的DIV

2.写一个打开表情窗口的按钮

3.给表情按钮里面的每个表情加点击事件

4.获得表情的html标签

5.用jquery的append()将这个HTML标签插入步骤一中的DIV

6.步骤一的DIV  focus()

 

就在第6步出现问题

获得focus之后,DIV里面的光标会转移到DIV的开头,这让重视用户体验的我很头疼

 

解决办法如下

在将表情的Html标签插入到Div中之前,先让Div得到focus(),然后调用如下的js代码

function insertHtmlAtCaret(html) {
            var sel, range;
            if (window.getSelection) {
                // IE9 and non-IE
                sel = window.getSelection();
                if (sel.getRangeAt && sel.rangeCount) {

                    range = sel.getRangeAt(0);
                    range.deleteContents();
                    // Range.createContextualFragment() would be useful here but is
                    // non-standard and not supported in all browsers (IE9, for one)
                    var el = document.createElement("div");
                    el.innerHTML = html;
                    var frag = document.createDocumentFragment(),
                        node, lastNode;
                    while ((node = el.firstChild)) {
                        lastNode = frag.appendChild(node);
                    }
                    range.insertNode(frag);
                    // Preserve the selection
                    if (lastNode) {
                        range = range.cloneRange();
                        range.setStartAfter(lastNode);
                        range.collapse(true);
                        sel.removeAllRanges();
                        sel.addRange(range);
                    }
                }
            } else if (document.selection && document.selection.type != "Control") {
                // IE < 9
                document.selection.createRange().pasteHTML(html);
            }
        }

各大浏览器都兼容~

 

在Demo中完全解决了这个问题。

但是在我的项目中focus之后光标就直接到了最前面,然后表情就插入到了DIV内容的最前面,有没有做过这个问题的大神给解答一下   

我的项目是MVC4~  

可编辑DIV在获得焦点的时候让光标处于最后

标签:

原文地址:http://www.cnblogs.com/jiaxiang/p/4791444.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!