使用jQuery选择contentEditable div

时间:2013-04-05 18:15:40

标签: javascript jquery tablesorter

我有以下tablesorter小部件,它会在点击时将td元素转换为contentEditable div,然后在用户点击单元格外时将它们转换回td

$simjq.tablesorter.addWidget({
    id: 'makeColumnsEditable',

    format:function(table){
        var searchString = '',
            targetColumns = table.config.widgetOptions
                                 .makeColumnsEditable.targetColumns,
            inClick = false,
            thisCell = $simjq(),
            thisCellHtml = null;

        while (targetColumns.length){
            searchString.length ? 
                searchString += (',td:eq('+targetColumns.pop()+')') :
                    searchString += ('td:eq('+targetColumns.pop()+')');
        }

        function exitSelection(){
            //Re-attach text to cell and get rid of the div
            thisCellHtml = thisCell.children('div').html();
            thisCell.empty();
            thisCell.html(thisCellHtml);

            //Exit current selection
            thisCell = $simjq();

            //unbind handler from document
            $simjq(document).unbind('click', exitSelection)
        }

        $simjq(table).find('tr').each(function(){
            $simjq(this).find(searchString).on('click', function(event){
                if(!inClick || (thisCell[0] == $simjq(this)[0])){
                    event.stopPropagation();
                    if (thisCell[0] != $simjq(this)[0]){
                        inClick = true;

                        thisCell = $simjq(this);
                        thisCellHtml = thisCell.html();
                        thisCell.empty();
                        thisCell.append('<div contentEditable="true">'
                                           +thisCellHtml + '</div>');

                        $simjq(document).bind('click', exitSelection);
                    }
                } else {
                    //Allow click to bubble up to document
                    inClick = false;
                };
            });
        });
    }
});

我的问题是,当点击将div变成contentEditable div时,它不会选择它们,因此需要额外点击才能输入目标元素并进行编辑。当我点击div时,如何输入可编辑的div(即在文本中放置克拉),而不需要额外点击?

0 个答案:

没有答案