javascript - Selecting a contentEditable div with jQuery -
i've got following tablesorter widget, makes td
elements contenteditable divs when clicked, , converts them td
s when user clicks outside 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 cell , rid of div thiscellhtml = thiscell.children('div').html(); thiscell.empty(); thiscell.html(thiscellhtml); //exit current selection thiscell = $simjq(); //unbind handler 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 bubble document inclick = false; }; }); }); } });
my issue that, when click turns div
contenteditable div, doesn't select them, takes click enter target element , edit it. how enter editable div (i.e. place carat in text) when click on div, rather requiring click?
Comments
Post a Comment