如何绑定内容可编辑的子元素，以便在添加新元素时更新.length

how to bind content-editable child to update the .length if a new element is added

本文关键字：元素 添加 length 更新 新元素 绑定 何绑定 编辑      更新时间：2023-09-26

我有几个content-editable=truediv，并有jquery在可编辑的每个段落后添加一个span，并打印每个段落的长度

到目前为止，我有:

    $('.editable p').each(function(){
        $(this).append('<span>' + ($(this).text().length) + '</span>')
    });

然而，我不知道如何在编辑&按下回车键，添加一个新段落，或用于编辑p本身的文本

到目前为止我有(!):

    $('.editable').live().find('p');
    if ( $('.editable p > span').length > 0 ){
       $(this).append('<span>' + ($(this).text().length - $('span',this).text().length ) + '</span>')
    };
    $('.editable p').live().each(function(){
       $(this).hover(function(){ 
           $('span',this).replaceWith('<span>' + ($(this).text().length - $('span',this).text().length ) + '</span>');
       });
    });

但我不知道该怎么做，因为它没有取得成果!!

这是我想到的最好的，但还远远不够完美:

$(function () {
    $('.editable').on('keydown keypress keyup', function() {
        $(this).find('p').each(function () {
            var elem = $(this), length = elem.text().length;
            if (elem.has('span').length === 0) {
                elem.append('<span/>');
            }
            elem.find('span').text(length - length.toString().length);
        });
    });
});
http://jsfiddle.net/pepkin88/tMSBF/

我还尝试在段落后添加跨度。效果也好不到哪里去。向contentEditable元素添加新元素会导致奇怪的行为，在不同的浏览器中会有所不同，它会弄乱游标。我认为你能做的最好的事情是把长度放在文档的其他地方，并以其他方式显示它们(可能将它们放置在段落的末尾)。

相关文章：