contentEditable

Question

에 의해 생성 된 내부 HTML을 대체하여 im은 html + js로 Soulver와 유사한 응용 프로그램을 작성합니다. 입력 (강조 표시)에서 텍스트를 사용자 정의해야합니다. 입력 인스턴트 메시지 <div contenteditable="true"></div>을 사용하여 각 div에 입력 한 후 새로운 div가 나타납니다. 어떻게 id에 할당 할 수 있습니까? 또는 textarea에서와 같이 \ n을 사용하여 모든 내부 div를 재정의하십시오. 어떤 아이디어?

Answer 1

각 keyup 후에는 divs을 통해 루프 그들에게 attr를 추가 할 수

 $('#your-editable-div').live('keyup', function() { 
      $(this).children('div').each(function(index) { 
       $(this).attr('id', 'element-'+index); 
      }); 
     }); 

Answer 2

한 점은의 contentEditable의 contentEditable되지 않습니다주의하는 것이. IE7은 이것 때문에 고장납니다.

Mac의 Firefox에서 테스트 중이십니까? Chrome과 Safari는 동일한 문제가 없습니다.

Enter 키를 감지하고 기본 동작을 중지 할 수 있습니다. 그런 다음 브라우저 특정 항목 대신 원하는 내용을 삽입 할 수 있습니다.

//prevent users from typing on datepickers 
$("body").delegate('[contentEditable="true"]', "keypress", function(event) 
{ 
    //detect and override enter key press 
    if(event.which==8) 
    { 
     event.preventDefault(); /* stop default */ 
     /* More code to insert something at the mouse location */ 
    } 
}); 

가 커서 위치
Contenteditable text editor and cursor position

에 삽입하는 방법에 대한이 질문을 참조하십시오 (안된) jQuery를 사용하여