Question

我需要一些帮助，我遇到了这个问题。

我有一个我正在调用的api，它带来一个信息列表，我将数据输出到textarea，点击我只想选择这个textarea（而不是其他），并将内容复制到我的剪贴板

这就是我写的：

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

但这不起作用，当我用'.api-text'替换它并删除find（）时，它会选择该类的所有结果。

感谢所有帮助！

更新：

这是一个jsFiddle，其中包含了我所看到的粗略示例。 https://jsfiddle.net/ax6na18u/

Answer 1

我在go.target或＆＃34;（本）＆＃34;上搜索Rajesh的建议后找到了解决方案。

Rajesh的原始代码有效，只需要在HTML中使用$ event.target将其正确绑定：

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

$ event.target是万恶之路！

Answer 2

如所怀疑的那样，问题在于导航到textarea。

首先，您的this未指向按钮。其次，即使它是，你也没有一个带有api-txt类的元素。

您应该尝试以下方法之一：

转到最近的父级li），其中包含button和textarea并找到textarea。

$(el).closest('li').find('.api-txt').select();
如果结构保持不变，textarea和button位于同一级别，您可以在此级别进行搜索。

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

<强>示例

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>

如何只在点击时选择此textarea？

2 个答案: