Posted on 2009-08-27 14:57
月下孤城 阅读(2088)
评论(0) 编辑 收藏 所属分类:
javaScript
最近做一个项目，需要实现web端的im聊天功能。考虑到执行效率不能用extjs，最后决定采用jquery+div+css(没办法只有重新发明轮子了^_^)。个人一直比较反感js，感觉这门语言对开发人员太不人性化，尤其在调试、兼容性等问题，简直是场灾难(呵呵，工作之余发下牢骚)。项目进行到现在，一般功能实现也差不多了，回过头来对当初一些问题做个总结，留个名便于以后查询。该代码在ie6、ie7、firefox上测试通过。
一、html编辑器。
1.表情符插入:
对于这个功能在使用者看来实现是理所当然的事，但要自己实现却有2个难度：一是html textarea控件中并不支持html代码，即在textarea中使用<img src='...'>标签不会显示图片；二是在信息输入框输入文字的同时要支持表情符的任意插入，即在光标处插入表情。在网上查了很多资料，参考了extjs htmleditor源码，使用iframe方式总算把这问题搞定，以下是主要实现代码：
初始化htmleditor实现:
1 /*初始化htmleditor*/
2 function initInputHtmleditor(){
3 var iframeSrc = $.browser.msie? "javascript:false;" : "javascript:;";
4 var msgIndiv = '<IFRAME name="messageSend" id="messageSend" frameBorder="0" src="'+iframeSrc+'"></IFRAME>';
5 $('#msgInputDiv').html(msgIndiv);//把iframe加入到页面显示div中
6
7 /*通过div id获取iframe的document对象*/
8 var doc = getIframeDoc('messageSend');
9 doc.open();
10 doc.write(getDocMarkup());
11 doc.close();
12
13 $(doc).ready(function(){
14 doc.designMode="on";
15 //doc.contentEditable = true;
16 });
17
18 /*加载键盘触发事件*/
19 $(doc).bind('keypress',function(event){//添加处理事件
20 addSendMsg(event);
21 });
22 }
23
24 /*获取iframe document对象*/
25 function getIframeDoc(iframeId){
26 var iframeObj = $('#'+iframeId);
27 var wnd = getIframeWnd(iframeId);
28 var doc = $.browser.msie ? wnd.document : (iframeObj.contentDocument || wnd.document);
29 return doc;
30 }
31
32 /*获取iframe document window 对象*/
33 function getIframeWnd(iframeId){
34 return $.browser.msie ? document.frames(iframeId) : window.frames[iframeId];
35 }
36
37 /*
38 * 返回html document标志字符串
39 该方法中p元素的css margin和padding属性一定要设为0,否则ie下处理回车事件时行距会很大，因为ie在iframe下对回车是按<p></p>处理的*/
40 function getDocMarkup(){
41 return '<html><head><style type="text/css">' +
42 'body{border:0;margin:0px;padding:0px;height:98%;cursor:text;' +
43 'word-break:break-all;}' +//字体自动换行
44 'p{margin:0px;padding:0px;}' +
45 '</style></head><body></body></html>';
46 }
插入表情代码:
1 /*
2 * 在文档光标处插入文本
3 * 插入示例:
4 * var img = "<img src='"+basePath+"face/01.gif' ></img>";
5 * var doc = getIframeDoc('messageSend');//取iframe document对象
6 * insertAtCursor(doc,img,'messageSend');
7 * */
8 function insertAtCursor(doc,value,focusElId){
9 if($.browser.msie){//ie
10 var wnd = getIframeWnd(focusElId);//聚焦元素id
11 wnd.focus();
12 var r = doc.selection.createRange();
13 if(r){
14 r.collapse(true);
15 r.pasteHTML(value);
16 }
17 }else if($.browser.mozilla || $.browser.opera){//firefox ,opera
18 var wnd = getIframeWnd(focusElId);//聚焦元素id
19 wnd.focus();
20 doc.execCommand("InsertHTML", false, value === undefined ? null : value);
21 }else if($.browser.safari){//safari
22 doc.execCommand("InsertText", false, value === undefined ? null : value);
23 }
24 }
2.
发送消息Ctrl+enter事件捕获
1 //键盘按起之后的响应事件，可能为回车，可能为删除，可能为正常输入
2 function addSendMsg(e)
3 {
4 var evt = window.event ? window.event : e;
5 var isSend =false//是否出发Ctrl+enter键
6 if($.browser.msie){
7 isSend = evt.keyCode==10;
8 }else{
9 isSend = evt.ctrlKey && evt.keyCode==13;
10 }
11 if(isSend)//ctrl+回车键
12 {
13 var msg = getInputMessage();
14 if(msg == '' || msg == '<br>'){
15 alert("对不起，您不能发送空消息！！！");
16 setInputMsgFocus();
17 return;
18 }
19 /*发送消息*/
20 sendChatMsg(msg);
21 }
22 }
---------------------
月下孤城
mail:eagle_daiqiang@sina.com