标签:
一个涉及到用户体验的问题~
前言
因为要做一个发表心情的窗口,肯定要有插入表情的功能,出现问题之前的做法
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~
标签:
原文地址:http://www.cnblogs.com/jiaxiang/p/4791444.html