我有以下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(即在文本中放置克拉),而不需要额外点击?