在html編輯器中，一般預設按斷行符號總是出現<p></p>，當然按shift+enter可以是直接加<br>，而很多人希望按斷行符號就是<br>換行而不是分段。
一直有人問我這個問題，而我沒有寫代碼測試就認為在onkeydown裡面判斷event.keyCode==13就可以判斷並解決，而後來發現似乎並沒有人能用這種方法解決成功。對此表示歉意！為此，仔細研究了一下，發現可以有兩種解決方案，但是都不是很完美，不過已經基本可以滿足需要了：
1.在初始化編輯器內容的時候，加上"<div></div>"
這樣斷行符號的時候編輯器會直接產生"<div></div>"而不會產生<p></p>，就可以只是換行而不換段了，如下所示：
<SCRIPTLANGUAGE="javascript"><!--functioniniteditor(){varL_DEFAULTHTML_TEXT="<DIV></DIV>";varsz=""sz+="<BODYONCONTEXTMENU=\"returnfalse\">"+L_DEFAULTHTML_TEXT+"</BODY>"idEditbox.document.designMode="on"//編輯模式開啟idEditbox.document.write(sz)//以下代碼只是輔助方便看編輯器原始碼的idEditbox.document.attachEvent("onkeyup",readsource);idEditbox.document.attachEvent("onkeydown",readsource);}//看原始碼functionreadsource(){document.all.source.value=idEditbox.document.body.innerHTML;}//--></SCRIPT><BODY><iframewidth="500"height="400"id="idEditbox"></iframe><BR><INPUTTYPE="button"value="查看原始碼"><BR><TEXTAREANAME="source"ROWS="20"COLS="60"></TEXTAREA></BODY>
不足：
這種方法有個bug就是在編輯器中添加一些內容後，全選（ctr+A）然後刪除所有內容（這樣就把<div></div>也刪除了），重新輸入內容後斷行符號就還是會產生<p></p>
2.直接在onkeypress裡面處理
我們可以在onkeypress裡面直接出來，但判斷event.keyCode==13也就是是斷行符號的時候我們直接插入<br>標籤，這樣無論怎麼樣都不會出現問題的了。以下是程式碼範例：
<SCRIPTLANGUAGE="javascript"><!--functioniniteditor(){varsz=""sz+="<BODYONCONTEXTMENU=\"returnfalse\"></BODY>"idEditbox.document.designMode="on"idEditbox.document.write(sz)idEditbox.document.onkeypress=fnKeypress}functionfnKeypress(){//注意：如果焦點不在編輯器內該函數就不起作用了；varev=idEditbox.event;if(ev.keyCode==13){insertHTML("<br><!---->");//不知道是我瀏覽器問題還是其他問題，只插入<br>標籤游標不換行，必須附加點其他標籤，可以最後一起刪除之returnfalse;//這樣斷行符號就是等於失效了，不會加上討厭的<p>標籤}}//在游標位置插入htmlfunctioninsertHTML(html){varsel=idEditbox.document.selection;if(sel!=null){varrng=sel.createRange();if(rng!=null)rng.pasteHTML(html);}}//查看代碼functionreadsource(){document.all.source.value=idEditbox.document.body.innerHTML;}//--></SCRIPT><BODY><iframewidth="500"height="400"id="idEditbox"></iframe><BR><INPUTTYPE="button"value="查看原始碼"><BR><TEXTAREANAME="source"ROWS="20"COLS="60"></TEXTAREA></BODY>
不足：
1).insertHTML("<br><!---->");會產生垃圾代碼“<!---->”;
2).要保證焦點必須在編輯器中才能響應編輯器的onkeypress事件
因時間關係，本樣本程式並未給出焦點不在編輯器中的處理方法
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
