<!DOCTYPE?html>
<html?lang="en">
<head>
<meta?charset="UTF-8">
<title>Title</title>
<script?src="jquery.min.js"></script>
<style>
.commentBox{
width:700px;
margin:0?auto;
position:relative;
}
.commentBox?.textArea{
width:100%;
min-height:?100px;
border:1px?solid?#ddd;
padding:5px;
line-height:20px;
word-break:?break-all;
}
.commentBox?.textArea?img{
width:24px;
height:?24px;
vertical-align:?bottom;
}
.faceIcon{
margin:10px;
display:?block;
width:24px;
height:?24px;
background:?url("頭像.png")?no-repeat;
background-size:?100%;
}
.commentBox?.faceBox{
position:absolute;
width:410px;
height:250px;
padding:10px?5px;
border:1px?solid?#ddd;
display:?none;
background-color:?#fff;
}
.commentBox?.faceBox?img{
width:24px;
height:24px;
}
</style>
</head>
<body>
<div?class="commentBox">
<div?class="textArea"?id="editor"?contenteditable="true"></div>
<span?class="faceIcon">點擊添加表情</span>
<div?class="faceBox"></div>
</div>
<script>
var?editorX=document.getElementById("editor");
$(function(){
for(var?i=0;i<120;i++){
var?imgNum="";
if(i<10){
imgNum="00"+i;
}else?if(i>=10&&i<100){
imgNum="0"+i;
}else{
imgNum=i;
}
$('<img>').attr('src','face/f_static_'+imgNum+'.png').appendTo($(".faceBox"));
}
$(".faceIcon").on("click",function(){
$(this).parent().find(".faceBox").toggle();
});
$(".faceBox").on("click","img",function(){
var?emoji=$(this).attr("src");
$(".textArea").focus();
var?source='<img?src="'+emoji+'">'
insertContent(source);
$(this).parent().hide();
});
editorX.onblur=function(){
saveRange();
};
//保存光標(biāo)位置
function?saveRange()?{
var?selection?=?window.getSelection???window.getSelection()?:?document.selection;
if?(!selection.rangeCount)?return;
var?range?=?selection.createRange???selection.createRange()?:?selection.getRangeAt(0);
window._range?=?range;
}
//插入內(nèi)容
function?insertContent(str)?{
var?selection,?range?=?window._range;
if?(!window.getSelection)?{
range.pasteHTML(str);
range.collapse(false);
range.select();
}?else?{
selection?=?window.getSelection???window.getSelection()?:?document.selection;
range.collapse(false);
var?hasR?=?range.createContextualFragment(str);
var?hasR_lastChild?=?hasR.lastChild;
while?(hasR_lastChild?&&?hasR_lastChild.nodeName.toLowerCase()?==?"br"?&&?hasR_lastChild.previousSibling?&&?hasR_lastChild.previousSibling.nodeName.toLowerCase()?==?"br")?{
var?e?=?hasR_lastChild;
hasR_lastChild?=?hasR_lastChild.previousSibling;
hasR.removeChild(e);
}
range.insertNode(hasR);
if?(hasR_lastChild)?{
range.setEndAfter(hasR_lastChild);
range.setStartAfter(hasR_lastChild);
}
selection.removeAllRanges();
selection.addRange(range);
}
};
})
</script>
</body>
</html>
firefox和ie下功能掛掉，chrome正常，應(yīng)該怎么修改代碼
qq_sU_4
2017-04-05 09:23:50