Select All Text Inside Paragraph

July 26, 2022

I have a bunch of paragraphs that are editable. I’m trying to select the contents of the paragraph when clicked, so you don’t have to manually select it to modify the value. (Select all the text inside, delete it and write something else)

<p contenteditable="true" class="dbrEditableData" id="summary_pop_post_discount_dollars">EDIT ME</p>
<p contenteditable="true" class="dbrEditableData" id="summary_adjustment_debit">CHANGE ME</p>

I’m listening for the focus of the class dbrEditableData, but nothing happens when clicking the paragraph.

$(".dbrEditableData").on("focus", function () {
    console.log("FOCUS");
    $(this).select();
});

Any help on achieving this would be appreciated.

>Solution :

You can use the Selection API to do that, here is an example:

$(".dbrEditableData").on("focus", function(e) {
  document.getSelection().selectAllChildren(e.target); // select all content
  document.getSelection().deleteFromDocument(); // delete the selection
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p contenteditable="true" class="dbrEditableData" id="summary_pop_post_discount_dollars">EDIT ME</p>
<p contenteditable="true" class="dbrEditableData" id="summary_adjustment_debit">CHANGE ME</p>