html編輯器的回車換行問題解決方案_Web標準教程

教程Tag：暫無Tag,歡迎添加,賺取U幣!

在html編輯器中，一般默認按回車總是出現<p> </p>，當然按shift+enter可以是直接加<br>，而很多人希望按回車就是<br>換行而不是分段。

一直有人問我這個問題，而我沒有寫代碼測試就認為在onkeydown里面判斷event.keyCode==13就可以判斷并解決，而后來發現似乎并沒有人能用這種方法解決成功。對此表示歉意！為此，仔細研究了一下，發現可以有兩種解決方法，但是都不是很完美，不過已經基本可以滿足需要了：

1.在初始化編輯器內容的時候，加上"<div></div>"
這樣回車的時候編輯器會直接生成"<div></div>"而不會生成<p></p>，就可以只是換行而不換段了，如下所示：

以下為引用的內容：
<SCRIPT LANGUAGE="javascript"></SCRIPT><BODY ><iframe width="500" height="400" id="idEditbox"></iframe><BR><INPUT TYPE="button" value="查看源代碼" ><BR><TEXTAREA NAME="source" ROWS="20" COLS="60"></TEXTAREA></BODY>

不足：
這種方法有個bug就是在編輯器中添加一些內容后，全選（ctr+A）然后刪除所有內容（這樣就把<div></div>也刪除了），重新輸入內容后回車就還是會產生<p></p>

2.直接在onkeypress里面處理

我們可以在onkeypress里面直接出來，但判斷event.keyCode==13也就是是回車的時候我們直接插入<br>標簽，這樣無論怎么樣都不會出現問題的了。以下是代碼示例：

以下為引用的內容：
<SCRIPT LANGUAGE="javascript">"); //不知道是我瀏覽器問題還是其他問題，只插入<br>標簽光標不換行，必須附加點其他標簽，可以最后一起刪除之 return false;//這樣回車就是等于失效了，不會加上討厭的<p>標簽 }}//在光標位置插入htmlfunction insertHTML(html){var sel = idEditbox.document.selection;if (sel!=null) { var rng = sel.createRange(); if (rng!=null) rng.pasteHTML(html);}}//查看代碼function readsource(){ document.all.source.value=idEditbox.document.body.innerHTML;}//--></SCRIPT><BODY ><iframe width="500" height="400" id="idEditbox"></iframe><BR><INPUT TYPE="button" value="查看源代碼" ><BR><TEXTAREA NAME="source" ROWS="20" COLS="60"></TEXTAREA></BODY>

不足：
1).insertHTML("<br>"); 會產生垃圾代碼“”;
2).要保證焦點必須在編輯器中才能響應編輯器的onkeypress事件
因時間關系，本示例程序并未給出焦點不在編輯器中的處理方法