<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>模拟编辑框</title>
<style type="text/css">
.divTextArea{
border:1px solid #339966;
width:270px;
height:120px;
overflow:auto;
float:left
}
.divImageC{
background-color:#CCCCCC;
width:160px;
height:122px;
float:left;
margin-left:10px;
}
.divImageC img{
float:left;
margin-left:10px;
margin-top:10px;
}
</style>
<script type="text/javascript">
function $(sId){
return document.getElementById(sId);
}
window.onload=function(){
var aImgs=$("divFace").getElementsByTagName("img")
var i,nLen=aImgs.length;
var oDivTxt=$("divText");
var fn=function(){
oDivTxt.appendChild(this.cloneNode(true));
}
//绑定表情图片单击处理函数
for(i=0;i<nLen;i++){
aImgs[i].onclick=fn;
}
//使div可编辑
oDivTxt.contentEditable =true;
}
</script>
</head>
<body>
<div id="divText" class="divTextArea">
</div>
<div id="divFace" class="divImageC">
<img src="http://www.javaeye.com/images/smiles/icon_biggrin.gif"/>
<img src="http://www.javaeye.com/images/smiles/icon_smile.gif"/>
<img src="http://www.javaeye.com/images/smiles/icon_sad.gif"/>
<img src="http://www.javaeye.com/images/smiles/icon_surprised.gif"/>
</div>
</body>
</html>