jQuery Tablesorter, Focus to select the content

Question

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 ?

Answer 1

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