I would like to select the content of a Tablesorter cell using JQuery.
For example I applied the method setSelectionRange in a input text. Good auto select text.
<input onClick="this.setSelectionRange(0, this.value.length)" value="Sample Text" />
I want same effect to the content of a Tablesorter cell (DIV)
<div class="" contenteditable="true">0,00</div>
How to ?
If you're not using the editable widget for my fork of tablesorter (demo)
$('div[contenteditable]').on('focus', function() {
var cell = this;
// select all text in contenteditable
// see http://stackoverflow.com/a/6150060/145346
var range, selection;
if (document.body.createTextRange) {
range = document.body.createTextRange();
range.moveToElementText(cell);
range.select();
} else if (window.getSelection) {
selection = window.getSelection();
range = document.createRange();
range.selectNodeContents(cell);
selection.removeAllRanges();
selection.addRange(range);
}
});
If you are using the editable widget, then use the editable_selectAll
option.
Update: this method works as well (demo)
That is, if your browser supports it - see caniuse & this demo.
$('div[contenteditable]').on('focus', function() {
setTimeout(function(){
document.execCommand('selectAll', false, null);
}, 1);
});