在PHP中使用jQuery Ajax在第一个contenteditable div超过高度后如何添加新的contenteditable div？

Question

I have one contenteditable div in my webpage but now what I need is, when the max-height of the div will be exceeded then same new div will be automatically created.

Also the div look like previous one. Not only one div will appear it'ld be 10 to 15 div. One more thing when I remove the all content of second div, it will hide. Please anyone one help me. From last 15 days I am trying to make this.

Answer 1

Try this,

SCRIPT

$(function(){
    $('div.contenteditable').on('keypress',function(e){
        if(this.offsetHeight>=parseInt($(this).css('max-height'),10)) {
            if(!$(this).next('.contenteditable').length){
                $clone=$(this).clone();
                $clone.html('');
                $clone.insertAfter($(this));
            } else {
                return false;
            }
        }
    });
});

Demo

Updated if you want to bind all contenteditable divs then try this,

$(function(){
    $(document).on('keypress','div.contenteditable',function(e){
        // check the offset height with max-height
        if(this.offsetHeight>=parseInt($(this).css('max-height'),10)) {
            // check editable div is inserted after it or not
            if(!$(this).next('.contenteditable').length){
                $clone=$(this).clone();// making clone
                $clone.html('');// empty it
                $clone.insertAfter($(this));// inserting after current div
            } else { // if already exists
                $(this).next('.contenteditable').focus();// focus it
                return false; // and return false for the current
            }
        }
    });
});

Updated demo

To remove the editable divs add this in your code,

var code = e.keyCode ? e.keyCode : e.which;
if (code == 8 || code == 46) {
   if($('div.contenteditable').length >1 && // check length of editable divs
              // replace br's created by break-word property
              $(this).html().replace(/<br*>/,'')=='') { 
     $(this).remove();
     return false;
   }
   return true;
}

Remove div demo