在可编辑div中插入文字或图片解决思路与实现步

火狐等标准浏览器支持getSelection方法，IE9及以上版本也支持这一功能。令人头疼的是IE6-8并不支持。我们需要针对不同的浏览器编写不同的代码。虽然这些代码很常见，我还是想分享一下核心部分。

```javascript

function insertHTML(html) {

var sel, range;

if (window.getSelection) { // 针对IE9及非IE浏览器

sel = window.getSelection();

if (sel.getRangeAt && sel.rangeCount) {

range = sel.getRangeAt(0);

range.deleteContents();

var el = document.createElement('div');

elnerHTML = html;

var frag = document.createDocumentFragment(), node, lastNode;

while ((node = el.firstChild)) {

lastNode = frag.appendChild(node);

}

rangesertNode(frag);

if (lastNode) {

range = range.cloneRange();

range.setStartAfter(lastNode);

range.collapse(true);

sel.removeAllRanges();

sel.addRange(range);

}

}

} else if (document.selection && document.selection.type != 'Control') { // 针对非标准浏览器，如IE6-8

dthis.focus(); // 使目标div获得焦点

var ierange = document.selection.createRange(); // 获取光标位置

dthis.focus(); // 重新设置焦点

}

}

```

最初，我曾尝试通过为div3设置点击（click）和焦点（focus）事件来解决这个问题。当鼠标点击进入或div3获得焦点时，设置一个变量（如isdiv3）为true，而在其他地方点击则设为false。这种方法在实际操作中并不奏效。因为存在多种情况，即使元素获得焦点，isdiv3依然不会被正确设置为true。而且，为每个HTML元素设置事件以改变isdiv3的状态将会是一项繁琐且复杂的工作。

现在，我将分享一种更为通用且不易被干扰的解决方法。这个方法的核心思想是通过设置CSS样式来追踪获得焦点的div。在页面最顶部加入以下样式代码：

```css

div:focus {

z-index: 100; / 这个值可以随意设置，100只是示例 /

}

```