How to only select this textarea on click?

Question

I need some help, I am stuck at this problem.

I have an api that I am calling, it brings in a list of information, I output the data into a textarea, on click I only want to select THIS textarea (not the others), and copy the content into my clipboard.

This is what I wrote:

function copyText() {
    $(this).find('.api-text').select();
    document.execCommand('copy');
}

But this is not working, when I replace this with '.api-text' and remove the find(), it selects ALL results with that class.

All the help is appreciated!

UPDATE:

Here is a jsFiddle with a rough example of what I am seeing. https://jsfiddle.net/ax6na18u/

do you want to select the highlighted text or the text that you click? — aharen, Aug 10 '17 at 05:17
Can you show us the HTML as well? Also what is `this` pointing to? — Rajesh, Aug 10 '17 at 05:17
Your code is not enough to answer pls provide some more details — SAMUEL, Aug 10 '17 at 05:17
Do you want to bind the `copyText` method to the `onClick` event of the textarea? If so, you're probably looking for [a way to get the element that triggered the event](https://stackoverflow.com/questions/48239/getting-the-id-of-the-element-that-fired-an-event) as opposed to `$(this)` — Mihai Pantea, Aug 10 '17 at 05:20
Here is the HTML, I am writing an angular4 SPA, this calls on an API, I run a loop through the data, out put it on a li, and from there is a text-area that is brought it on EACH element's data along with copy to clipboard button. On click of the copy to clipboard button, I want to copy ONLY the textarea above it. — M Q, Aug 10 '17 at 05:32

M Q · Accepted Answer · 2017-10-11T16:55:35.547

1

I found the solution after googling a suggestion from Rajesh on event.target or "(this)".

Rajesh's original code worked, just had to tie it in correctly in the HTML with $event.target:

<button class="btn btn-primary" (click)="copyText($event.target)">Copy to Clipboard</button>

The $event.target was the route of all evil!

edited Oct 11 '17 at 16:55

answered Aug 10 '17 at 07:33

M Q

233
1
4
12

score 0 · Answer 2 · answered Aug 10 '17 at 05:40

As suspected, issue is in navigating to textarea.

First, your this is not pointing to button. Second, even if it was, you do not have an element with class api-txt in it.

You should try one of these approaches:

Go to nearest parent(li) that encapsulates both button and textarea and find textarea.

$(el).closest('li').find('.api-txt').select();
If the structure is going to remain like this where textarea and button will be on same level, you can search at this level.

$(el).siblings('.api-txt').select();

Sample

function copyText(el) {
  //$(el).closest('li').find('.api-txt').select();
  // or
  $(el).siblings('.api-txt').select();
  document.execCommand('copy');
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<ul *ngIf="results">
  <li *ngFor="let result of results | slice:0:9">
    <a href="{{ result.latest }}" target="_blank">
      {{ result.name }}
    </a>
    <textarea name="apiurl" class="api-txt">{{ result.latest }}</textarea>
    <br>
    <button class="btn btn-primary" onclick="copyText(this)">Copy to Clipboard</button>
  </li>
</ul>

How to only select this textarea on click?

2 Answers2