Posted on 2009-08-27 14:57
月下孤城 閱讀(2110)
評論(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