javascript - 如何在第一个 contenteditable div 超过高度后使用 jquery ajax 在 php 中添加新的 contenteditable div？

Question

我的网页中有一个 contenteditable div，但现在我需要的是，当超过 div 的最大高度时，将自动创建相同的新 div。

div 看起来也和之前的一样。不仅一个 div 会出现，它会是 10 到 15 div。还有一件事，当我删除第二个 div 的所有内容时，它会隐藏。请任何人帮助我。从过去的 15 天开始，我就在努力做到这一点。

Answer 1

试试这个，

脚本

$(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

更新如果你想绑定(bind)所有contenteditable div然后试试这个，

$(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

要删除可编辑的 div，请在您的代码中添加此内容，

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