Alternative for document.execCommand('selectAll',false,null) [duplicate]

Question

I have the following code which allows me to select a div text each time the user click on it:

<table>
  <tr>
    <td>
      <div contenteditable onClick="document.execCommand('selectAll',false,null)">I'm editable</div>
    </td>
  </tr>
  <tr>
    <td>
      <div contenteditable>I'm also editable</div>
    </td>
  </tr>
  <tr>
    <td>I'm not editable</td>
  </tr>
</table>

My problem is that document.execCommand is deprecated and I want to change it for a good alternative. How can I do that?

Care to explain the use case? We have developer.mozilla.org/en-US/docs/Web/API/Selection and developer.mozilla.org/en-US/docs/Web/API/Range these days. But afaik, we cannot just copy that to like the clipboard and such ( which also used execCommand ) so a new Range() might not fix the issue. If you just want to highlight the text so users can immediately type, I use an input with all stylings removed instead of a div, to get that functionality out of the box with .select(). — Shilly
– Shilly, Commented Jan 23, 2020 at 14:56
Does this answer your question? Select all DIV text with single mouse click — 0bero
– 0bero, Commented Jan 23, 2020 at 14:56

Ricardo Rocha · Accepted Answer · 2020-01-23 15:05:54Z

4

Based in Alvaro Tihanyi comment and Shilly comment I found out this solution:

function selectText(element) {
    if (document.selection) { // IE
        var range = document.body.createTextRange();
        range.moveToElementText(element);
        range.select();
    } else if (window.getSelection) {
        var range = document.createRange();
        range.selectNode(element);
        window.getSelection().removeAllRanges();
        window.getSelection().addRange(range);
    }
}

<table>
  <tr>
    <td>
      <div id="selectable" contenteditable onclick="selectText(this)">I'm editable</div>
    </td>
  </tr>
  <tr>
    <td>
      <div contenteditable>I'm also editable</div>
    </td>
  </tr>
  <tr>
    <td>I'm not editable</td>
  </tr>
</table>

edited Jan 23, 2020 at 15:05

answered Jan 23, 2020 at 15:01

Ricardo Rocha

16.5k24 gold badges86 silver badges142 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Shilly Over a year ago

Use an actual event listener so you can use event.target to refer to the div instead of an inline event in the HTML that passes a string to use as a selector.

Collectives™ on Stack Overflow

Alternative for document.execCommand('selectAll',false,null) [duplicate]

1 Answer 1

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Linked

Related