HTML 편집기에서는 기본적으로 Enter를 누르면 항상 <p> </p>가 나타납니다. 물론 Shift+Enter를 누르면 <br>이 직접 추가될 수 있으며 많은 사람들은 Enter를 누르면 <br>이 줄 바꿈하기를 바랍니다. 부분을 깨는 대신.
사람들이 저한테 이런 질문을 많이 했었는데, 코드 테스트를 작성하지 않고 onkeydown에서 event.keyCode==13 으로 판단해서 해결하면 될 것 같았는데 나중에 보니 누구도 성공적으로 해결하지 못하는 것 같았습니다. 이 방법을 사용합니다. 죄송해요! 이러한 이유로 주의 깊게 연구한 결과 두 가지 솔루션이 있다는 사실을 발견했지만 둘 다 완벽하지는 않지만 기본적으로 요구 사항을 충족할 수 있습니다.
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 );}//소스 코드 보기 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> |
불충분하다:
이 방법의 버그는 편집기에서 일부 콘텐츠를 추가한 후 모두 선택(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}function fnKeypress(){ //참고: 포커스가 편집기에 없으면 이 함수는 작동하지 않습니다. var ev = idEditbox.event; keyCode==13){ insertHTML("<br><!-- -->"); //내 브라우저의 문제인지 다른 문제인지는 모르겠습니다. <br> 태그만 삽입되고 커서는 줄 바꿈되지 않습니다. 다른 태그를 첨부해야 합니다. 끝에서 함께 삭제할 수 있습니다. false를 반환합니다.//이런 식으로 캐리지 리턴은 유효하지 않은 것과 동일하며 성가신 <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 이벤트에 응답하려면 초점이 편집기에 있어야 하므로 시간 제약으로 인해 이 샘플 프로그램은 초점이 편집기에 없을 때 처리 방법을 제공하지 않습니다.