ตามค่าเริ่มต้นในตัวแก้ไข html <p> </p> จะปรากฏขึ้นเสมอเมื่อกด Enter แน่นอนว่าการกด shift+enter จะสามารถเพิ่ม <br> ได้โดยตรง และหลายๆ คนหวังว่าการกด Enter จะทำให้ <br> พันคำ แทนที่จะแตกหักเป็นส่วนหนึ่ง
มีคนถามคำถามนี้กับฉัน แต่หากไม่มีการเขียนการทดสอบโค้ด ฉันคิดว่าฉันสามารถตัดสินและแก้ไขมันได้ด้วยการตัดสิน event.keyCode==13 ใน onkeydown แต่ต่อมาฉันพบว่าไม่มีใครสามารถแก้ปัญหาได้สำเร็จ โดยใช้วิธีนี้ ขออภัยเกี่ยวกับเรื่องนั้น! ด้วยเหตุนี้ หลังจากการศึกษาอย่างรอบคอบ ฉันพบว่ามีวิธีแก้ไขสองวิธี แต่ก็ไม่มีทั้งสองวิธีที่สมบูรณ์แบบ แต่โดยพื้นฐานแล้วสามารถตอบสนองความต้องการได้:
1. เมื่อเริ่มต้นเนื้อหาตัวแก้ไข ให้เพิ่ม "<div></div>"
ด้วยวิธีนี้ เมื่อคุณกด Enter โปรแกรมแก้ไขจะสร้าง "<div></div>" โดยตรงแทน <p></p> และคุณสามารถล้อมบรรทัดแทนย่อหน้าได้ ดังที่แสดงด้านล่าง:
| ต่อไปนี้เป็นเนื้อหาที่ยกมา: <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="แหล่งที่มา" 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(){ //หมายเหตุ: ฟังก์ชันนี้จะไม่ทำงานหากโฟกัสไม่อยู่ในโปรแกรมแก้ไข var ev = idEditbox.event; keyCode==13){ insertHTML("<br><!-- -->"); // ฉันไม่รู้ว่าเป็นปัญหากับเบราว์เซอร์ของฉันหรืออย่างอื่น เคอร์เซอร์ไม่ได้ตัดคำ คุณต้องแนบแท็กอื่น ๆ คุณสามารถลบมันพร้อมกันได้ในตอนท้าย return false;// ด้วยวิธีนี้ การขึ้นบรรทัดใหม่จะเทียบเท่ากับแท็กที่ไม่ถูกต้อง และแท็ก <p> ที่น่ารำคาญจะไม่ถูกเพิ่ม}} //แทรกฟังก์ชัน html ที่ตำแหน่งเคอร์เซอร์ insertHTML(html){var sel = idEditbox.document.selection;if (sel!=null) { var rng = sel.creation(); 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="แหล่งที่มา" ROWS="20" COLS ="60"></ข้อความ></ร่างกาย> |
ไม่เพียงพอ:
1).insertHTML("<br><!-- -->"); จะสร้างโค้ดขยะ "<!-- -->";
2) เพื่อให้แน่ใจว่าโฟกัสต้องอยู่ในเอดิเตอร์เพื่อตอบสนองต่อเหตุการณ์ onkeypress ของเอดิเตอร์ เนื่องจากข้อจำกัดด้านเวลา โปรแกรมตัวอย่างนี้จึงไม่มีวิธีการประมวลผลเมื่อโฟกัสไม่อยู่ในเอดิเตอร์