In the HTML editor, the general default press ENTER always appears <p></p>, of course, by Shift+enter can be directly add <br>, and many people want to press ENTER is <br> line change instead of segmentation.
I have been asked this question, and I did not write code tests that the onkeydown inside Judge Event.keycode==13 can be judged and resolved, and later found that no one seems to be able to solve the success of this method. Apologize for that! To this end, a careful study, found that there can be two solutions, but are not perfect, but has been basically enough to meet the needs of:
1. When initializing editor content, add "<div></div>"
In this way, the editor will generate "<div></div>" directly without generating the <P></P>, and you can simply break the line without changing the paragraph, as follows:
<scriptlanguage= "JavaScript" ><!--functioniniteditor () {varl_defaulthtml_text= "<DIV></DIV>" ; varsz= "" sz+= "<bodyoncontextmenu=\" returnfalse\ ">" +l_defaulthtml_text+ "</BODY>" Ideditbox.document.designmode= "on"//edit mode to open IdEditbox.document.write (SZ)// The following code is just a convenience to see editor source code idEditbox.document.attachEvent ("onkeyup", Readsource); IdEditbox.document.attachEvent (" OnKeyDown ", Readsource);} See Source code Functionreadsource () {document.all.source.value=ideditbox.document.body.innerhtml;} --></script><body><iframewidth= "height=" id= "Ideditbox" ></iframe><br ><inputtype= "button" value= "View Source code" ><br><textareaname= "Yuan" rows= "cols=" "></" Textarea></body>
Insufficient:
This method has a bug is to add some content in the editor, select All (ctr+a) and then delete all the content (so that the <div></div> also deleted), re-enter the contents of the return will still produce <p></p>
2. Deal directly in onkeypress
We can come out directly inside the onkeypress, but when we judge Event.keycode==13 is a carriage return, we insert the <br> tag directly, so no matter what happens. The following is a code example:
<scriptlanguage= "JavaScript" ><!--functioniniteditor () {varsz= "" sz+= "<bodyoncontextmenu=\" Returnfalse\ "></BODY>" ideditbox.document.designmode= "on" IdEditbox.document.write (SZ) Ideditbox.document.onkeypress=fnkeypress}functionfnkeypress () {//Note: The function does not work if the focus is not in the editor; varev=ideditbox.event; if (ev.keycode==13) {inserthtml ("<br><!---->");/I don't know if it's me. Browser or other issues, only insert <br> tag cursor does not wrap, you must attach points to other labels, Can be last deleted together returnfalse;//so carriage return is equal to failure, will not add nasty <p> tags}}//at the cursor position insert htmlfunctioninserthtml (HTML) {varsel= Ideditbox.document.selection;if (sel!=null) {varrng=sel.createrange (); if (rng!=null) rng.pastehtml (HTML);} View Code Functionreadsource () {document.all.source.value=ideditbox.document.body.innerhtml;} --></script><body><iframewidth= "height=" id= "Ideditbox" ></iframe><br ><inputtype= "button" value= "View Source code" ><br><textareaname= "Yuan" rows= "cols=" "></" Textarea></body>
Insufficient:
1). inserthtml ("<br><!---->"); will generate the garbage code "<!---->";
2. To ensure that the focus must be in the editor to respond to the editor's onkeypress Event
Because of the time relationship, this sample program does not give the focus of the processing method in the editor
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
