Question

我要做的是将文本从“消息”列复制到剪贴板。

问题是，当我点击“复制邮件”按钮时，它只会复制第一行中的第一条邮件。

在剃刀视图中有没有解决方法？

             ....
@foreach (var item in Model.Customer)
            {

                <tr>
                    <td>
                        @item.id
                    </td>
                    <td >
                       <span id="messageText"> @item.message</span>
                    </td>
                    <td >
                        <button id="copyButton" class="btn btn-default" onclick="copyToClipboard('#messageText')">Copy Message</button>
                    </td>
                    <td >
                        @item.name
                    </td>                 

                    <td >
                        @item.lastName
                    </td>

                </tr>
            }
        </table>

JQuery:

  function copyToClipboard(element) {
                var $temp = $("<input>");
                $("body").append($temp);
                $temp.val($(element).text()).select();
                document.execCommand("copy");
                $temp.remove();
            }

Answer 1

您当前的代码是将范围的Id属性值设置为循环内的messageText 。这将创建具有相同Id属性值的多个跨度。当您调用copyToClipboard方法时，您将传递jQuery Id选择器表达式（'#messageText'）以获取DOM元素。 Id选择器将始终返回与Id匹配的第一个元素，因此您始终会收到第一条消息。

在文档中，ID应该是唯一的。重复的Id属性值文档无效标记。

您不应将静态值硬编码为循环内的Id属性值。使用更通用的选择器获取数据。

@foreach (var item in users)
{
    <tr>
        <td>
            @item.Id
        </td>
        <td >
            <span class="messageText"> @item.message</span>
        </td>
        <td >
            <button class="btn btn-default" onclick="copyToClipboard(this)">Copy</button>
        </td>
    </tr>
}

以及我们将使用相对选择器方法的脚本，例如closest和find

function copyToClipboard(element) {
    var msg = $(element).closest("tr").find("span.messageText").text();
    alert(msg);
    var $temp = $("<input>");
    $("body").append($temp);
    $temp.val(msg).select();
    document.execCommand("copy");
    $temp.remove();
}

有一种更简单有效的方法来处理这个用例。为什么不直接将消息传递给copyToClipboard方法？

<td>
     <button class="btn" onclick="copyToClipboard('@item.message')">Copy</button>
</td>

和

function copyToClipboard(message) {
     var msg = message;
     alert(msg);
     //use msg now
}

我喜欢这种方法，因为我根本没有触及DOM来获取消息（使用任何jQuery代码）

如何在剃刀视图中从特定表格单元格将文本复制到剪贴板？

1 个答案: