0

I've got the following tablesorter widget, which makes the td elements into contentEditable divs when clicked, and then converts them back into tds when the user clicks outside the cell.

$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;
                };
            });
        });
    }
});

My issue is that, when a click turns a div into a contentEditable div, it doesn't select them, so it takes an extra click to enter the target element and edit it. How to I enter the editable div (i.e. place the carat in the text) when I click on the div, rather than requiring an extra click?

ckersch
  • 7,507
  • 2
  • 37
  • 44
  • Possible [duplicate](http://stackoverflow.com/questions/2388164/set-focus-on-div-contenteditable-element) – Benjamin Kaiser Apr 05 '13 at 18:52
  • 1
    Instead of injecting a div, why not make the `td` content editable? Actually, you've inspired me to rewrite the above widget which I'll share with you once I make sure all the bugs are squished. – Mottie Apr 07 '13 at 12:34
  • For whatever reason, it didn't cross my mind that I could just make the `td`s editable. I've done editableContent on `div`s before, so I had just gone with that. Editing the `td`s fixed the issue with click selection. – ckersch Apr 08 '13 at 16:01
  • 2
    I've added a content editable widget in the latest version... check it out! http://mottie.github.io/tablesorter/docs/example-widget-editable.html – Mottie Apr 13 '13 at 02:45

0 Answers0