Search code examples
cssangulartypescriptprimengprimeng-turbotable

Select entire cell text on single click for cell edit instead of double click in primeng table

I am using a p-table with cells populated with integer data and is editable. Now on single click the input text becomes visible with the cursor at the end of the cell text. The requirement is to select the entire content of the cell text on single click edit itself. Basically single click should behave like the double click. I added 2 events in app.component.html for input:

(focus)="focusInFunction($event)"
(dblclick)="eventEmitDoubleClick($event)"

But simply calling eventEmitDoubleClick() from focusInFunction() function does not work.

Solution

  • Here you can try something like this:

    $('#highlight').on('click', function() {
  var Target = document.getElementById("highlight");
  Target.select();
})
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" value="hello world" id="highlight">