HTML エディターでは、デフォルトで Enter キーを押すと常に <p> </p> が表示されます。 もちろん、Shift+Enter キーを押すと <br> を直接追加できます。多くの人は Enter キーを押すと <br> が折り返されることを期待します。部分を壊す代わりに。
この質問はよく聞かれるのですが、コードテストを書かずにonkeydownのevent.keyCode==13を判断すれば解けるだろうと思っていましたが、後で調べたら誰もうまく解けないようでした。この方法を使って。ごめんなさい！このため、慎重に検討した結果、解決策は 2 つあり、どちらも完璧ではありませんが、基本的にはニーズを満たすことができることがわかりました。
1. エディタ内容を初期化する際に「<div></div>」を追加します。
このようにして、Enter キーを押すと、エディターは <p></p> の代わりに "<div></div>" を直接生成し、以下に示すように、段落の代わりに行を折り返すだけで済みます。
| 引用した内容は以下の通りです。 <SCRIPT LANGUAGE="javascript"><!--function initeditor(){ var L_DEFAULTHTML_TEXT="<DIV></DIV>" var sz="" sz+="<BODY ONCONTEXTMENU="return false">"; +L_DEFAULTHTML_TEXT+"</BODY>" idEditbox.document.designMode="on"//編集モードを開く idEditbox.document.write(sz) //次のコードは、エディターのソース コードの表示を支援するためのものです。 idEditbox.document.attachEvent ( " onkeyup" , readsource ); idEditbox.document.attachEvent( "onkeydown" , readsource );}// ソースコード関数を見てみましょう 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> |
不十分：
この方法のバグは、エディターにコンテンツを追加した後、すべてを選択し (ctr+A)、すべてのコンテンツを削除し (これにより <div></div> も削除されます)、コンテンツを再入力して Enter キーを押すことです。 . <p></p> が生成されます。
2. onkeypress で直接処理します。
onkeypressで直接出てもいいのですが、event.keyCode==13を判定するとき、つまりEnterを押すときは<br>タグを直接挿入するので、何があっても問題ないようにしています。コード例は次のとおりです。
| 引用した内容は以下の通りです。 <SCRIPT LANGUAGE="javascript"><!--function initeditor(){ var sz="" sz+="<BODY ONCONTEXTMENU="return false"></BODY>" idEditbox.document.designMode="on" idEditbox.document.write(sz) idEditbox.document.onkeypress=fnKeypress}function fnKeypress(){ //注: フォーカスがエディターにない場合、この関数は機能しません。 keyCode==13){ insertHTML("<br><!-- -->"); //ブラウザの問題なのか他の問題なのかわかりません。<br> タグのみが挿入されます。カーソルは折り返されません。他のタグを付ける必要があります。最後にまとめて削除できます。//この方法では、改行は無効と同等になり、煩わしい <p> タグは追加されません。 //カーソル位置にhtml関数を挿入 insertHTML(html){var sel = idEditbox.document.selection;if (sel!=null) { var rng = sel.createRange(); if (rng!=null) rng.pasteHTML (html);}} //コード関数 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 イベントに応答するには、フォーカスがエディター内にある必要があることを確認するため、このサンプル プログラムでは、エディター内にフォーカスがない場合の処理メソッドは提供していません。