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

时间:2014-03-24 05:02:55

标签: javascript jquery html css

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

此外,div看起来像前一个。不仅会出现一个div,而且还会有10到15个div。当我删除第二个div的所有内容时,还有一件事就是隐藏它。 请有人帮助我。在过去的15天里,我试图做到这一点。

1 个答案:

答案 0 :(得分:1)

试试这个,

<强> 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

已更新如果您想绑定所有contenteditable divs,请尝试此操作,

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

要删除editable divs在代码中添加此内容,

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