使用 javascript 動態復制文本字段

Question

我正在使用 php（laravel/blade）循環數據，每個循環輸出一個HTML部分，其中包含不同值的輸入字段。

當我單擊特定 div 上的按鈕時，我希望能夠復制每個輸入字段的值，但是我用來復制輸入字段值的javascript代碼只復制一個值，無論哪個div的按鈕被點擊

這是每個循環的HTML output

<form action="{{ route('user.account.deposit') }}" method="post">
@csrf
<p>Please input amount USD worth of {{ Cryptocap::getSingleAsset(strtolower($method->name))->data->symbol }} to
    deposit and send the exact same amount to the wallet address below, before clicking submit.</p>
<div class="input-group">
    <input type="number" class="form-control" name="amount">
</div>
<div class="input-group">
    <input type="text" class="form-control" value="{{ $method->wallet_address }}" id="{{ $method->name }}"
        name="wallet_address" readonly>
</div>
<input type="hidden" value="{{ $method->id }}" name="payment_method_id">
<br>
<button type="submit" class="btn green">Deposit</button>
<a href="javascript:void(0)" class="btn btn-primary btn-xs" onclick="copy()">Copy to Clipboard</a>
<script>
    function copy() {
        /* Get the text field */
        var copyText = document.getElementById("{{ $method->name }}");

        /* Select the text field */
        copyText.select();
        copyText.setSelectionRange(0, 99999); /* For mobile devices */

        /* Copy the text inside the text field */
        navigator.clipboard.writeText(copyText.value);

        /* Alert the copied text */
        alert("Copied the text: " + copyText.value);
    }
</script>

Answer 1

如果是這種情況，那么您在此處發布的整個 HTML 和 JS 都會為您的 php 循環的每次迭代輸出，那么問題在於 JS 復制功能的重新定義，因為它被覆蓋了。

您的解決方案可能是，您對副本 function 只有一個定義，並提供特定元素名稱作為參數。

<form action="{{ route('user.account.deposit') }}" method="post">
@csrf
<p>Please input amount USD worth of {{ Cryptocap::getSingleAsset(strtolower($method->name))->data->symbol }} to
    deposit and send the exact same amount to the wallet address below, before clicking submit.</p>
<div class="input-group">
    <input type="number" class="form-control" name="amount">
</div>
<div class="input-group">
    <input type="text" class="form-control" value="{{ $method->wallet_address }}" id="{{ $method->name }}"
        name="wallet_address" readonly>
</div>
<input type="hidden" value="{{ $method->id }}" name="payment_method_id">
<br>
<button type="submit" class="btn green">Deposit</button>

<!-- Changed the onClick-Event to provide the Name as fixed parameter -->
<a href="javascript:void(0)" class="btn btn-primary btn-xs" onclick="copy({{ $method-name }})">Copy to Clipboard</a>

<!-- Move this section out of the loop and maybe at the bottom of the page -->
<script>
    function copy(inputId) {
        /* Get the text field */

        // Changed to get the Element by the parameter containing the ElementID
        var copyText = document.getElementById(inputId);

        /* Select the text field */
        copyText.select();
        copyText.setSelectionRange(0, 99999); /* For mobile devices */

        /* Copy the text inside the text field */
        navigator.clipboard.writeText(copyText.value);

        /* Alert the copied text */
        alert("Copied the text: " + copyText.value);
    }
</script>