主頁 > 後端開發 > 按鈕var到剪貼板

按鈕var到剪貼板

2022-05-15 21:12:27 後端開發

在下面的函式中有這個 var 鏈接。通過單擊按鈕,我想將 var 復制到剪貼板。

function displayUser(user) {
    
var text = `Account No.: ${user.userId} <br> Country: ${user.country} <br> 
 "<button onclick="copyToClipboard(link)"> Copy Link</button>"`;
var link = `${user.Url}`;

grid.innerHTML  = text;
}

function user(data) {
    data.result.roomList.forEach((user) => displayUser(user));
}

我在這里找到并嘗試的是這個功能:

function copyToClipboard(link){
    var dummy = document.createElement("input");
    dummy.style.display = 'none';
    document.body.appendChild(dummy);
    dummy.setAttribute("id", "dummy_id");
    document.getElementById("dummy_id").value=link;
    dummy.select();
    document.execCommand("copy");
    document.body.removeChild(dummy);

通過單擊按鈕,它會顯示“未定義鏈接”。任何人都知道如何使這項作業?

提前致謝

uj5u.com熱心網友回復:

這部分應該是:

function displayUser(user) {
    
    var link = user.Url;
    var text = `Account No.: ${user.userId} <br> Country: ${user.country} <br> 
    "<button onclick="copyToClipboard(${link})"> Copy Link</button>"`;

    grid.innerHTML  = text;
}

function user(data) {
    data.result.roomList.forEach((user) => displayUser(user));
}

變數鏈接無法訪問,因為您在之后定義了它,而且您沒有正確地將其括起來

uj5u.com熱心網友回復:

你可以這樣做。這并沒有使復制到剪貼板作業,但這就是您可以將它傳遞給您想要的函式的方式。

function displayUser(user) {
    
    var grid = document.getElementById("testgrid");
    console.log(grid);

    var link = `${user.Url}`;
    var text = `Account No.: ${user.userId} <br> Country: ${user.country} <br> 
     <button onclick="copyToClipboard('${link}')"> Copy Link</button>`;
    
    grid.innerHTML  = text;
}
    
function user(data) {
    data.result.roomList.forEach((user) => displayUser(user));
}

function copyToClipboard(link){
    console.log(link);
    var dummy = document.createElement("input");
    dummy.style.display = 'none';
    document.body.appendChild(dummy);
    dummy.setAttribute("id", "dummy_id");
    document.getElementById("dummy_id").value=link;
    dummy.select();
    document.execCommand("copy");
    document.body.removeChild(dummy);
}

displayUser({Url: "bla", country: "blabla"});

uj5u.com熱心網友回復:

我嘗試了現在看起來像這樣的 Cypherjac 版本。我不再收到錯誤訊息,但剪貼板中也沒有結果。

function displayUser(user) {

var link = user.Url;
var text = `Account No.: ${user.userId} <br> Country: ${user.country} <br> 
<button onclick="copyToClipboard(${link})"> Copy Link</button>`;

grid.innerHTML  = text;
}

function user(data) {
  data.result.roomList.forEach((user) => displayUser(user));
}

function copyToClipboard(link){
    var dummy = document.createElement("input");
    dummy.style.display = 'none';
    document.body.appendChild(dummy);
    dummy.setAttribute("id", "dummy_id");
    document.getElementById("dummy_id").value=link;
    dummy.select();
    document.execCommand("copy");
    document.body.removeChild(dummy);
} 

然后我嘗試了現在看起來像這樣的 Chris G 的建議。但也沒有錯誤,也沒有結果。還有什么想法嗎?

let link;               
            
function displayUser(user) {
    
var text = `Account No.: ${user.userId} <br> Country: ${user.country} <br> 
 "<button onclick="copyToClipboard()"> Copy Link</button>"`;
link = user.Url;

grid.innerHTML  = text;
}

function user(data) {
    data.result.roomList.forEach((user) => displayUser(user));
}

function copyToClipboard(){
    var dummy = document.createElement("input");
    dummy.style.display = 'none';
    document.body.appendChild(dummy);
    dummy.setAttribute("id", "dummy_id");
    document.getElementById("dummy_id").value=link;
    dummy.select();
    document.execCommand("copy");
    document.body.removeChild(dummy);
}

轉載請註明出處,本文鏈接:https://www.uj5u.com/houduan/474754.html

標籤:javascript api 按钮

上一篇:如何使用Object.assign()將物件添加到現有屬性?[復制]

下一篇:返回列表

標籤雲
其他(140575) Python(32497) JavaScript(20487) Java(15603) C(13657) 區塊鏈(8222) AI(7469) 基礎類(6313) C#(6297) MySQL(6088) 爪哇(5919) html(5392) 腳本語言(PerlPython)(5129) 熊猫(5042) PHP(5006) sql(4975) 非技術區(4971) Linux(4733) 数组(4526) R(4422) Android(4340) 反应(4018) 数据框(3527) css(3438) C語言(3288) 节点.js(3227) C++語言(3117) Java相關(2746) 疑難問題(2699) json(2682) 列表(2561) 單片機工控(2479) 扑(2470) 安卓(2455) VBA(2449) 打字稿(2323) 细绳(2092) ASP.NET(2077) iOS(2028) Web開發(1951) MongoDB(1899) 麻木的(1824) 循环(1823) 字典(1819) 網絡通信(1793) 蟒蛇-3.x(1774) 數據庫相關(1767) 正则表达式(1757) 擅长(1755) VB基礎類(1755) .NETCore(1732) 镖(1728) 迅速(1707) C++(1654) 開發(1646) Unity3D(1638) .NET技术(1617) 系統維護與使用區(1617) HtmlCss(1594) 功能(1581)

熱門瀏覽
  • 【C++】Microsoft C++、C 和匯編程式檔案

    ......

    uj5u.com 2020-09-10 00:57:23 more
  • 例外宣告

    相比于斷言適用于排除邏輯上不可能存在的狀態,例外通常是用于邏輯上可能發生的錯誤。 例外宣告 Item 1:當函式不可能拋出例外或不能接受拋出例外時,使用noexcept 理由 如果不打算拋出例外的話,程式就會認為無法處理這種錯誤,并且應當盡早終止,如此可以有效地阻止例外的傳播與擴散。 示例 //不可 ......

    uj5u.com 2020-09-10 00:57:27 more
  • Codeforces 1400E Clear the Multiset(貪心 + 分治)

    鏈接:https://codeforces.com/problemset/problem/1400/E 來源:Codeforces 思路:給你一個陣列,現在你可以進行兩種操作,操作1:將一段沒有 0 的區間進行減一的操作,操作2:將 i 位置上的元素歸零。最終問:將這個陣列的全部元素歸零后操作的最少 ......

    uj5u.com 2020-09-10 00:57:30 more
  • UVA11610 【Reverse Prime】

    本人看到此題沒有翻譯,就附帶了一個自己的翻譯版本 思考 這一題,它的第一個要求是找出所有 $7$ 位反向質數及其質因數的個數。 我們應該需要質數篩篩選1~$10^{7}$的所有數,這里就不慢慢介紹了。但是,重讀題,我們突然發現反向質數都是 $7$ 位,而將它反過來后的數字卻是 $6$ 位數,這就說明 ......

    uj5u.com 2020-09-10 00:57:36 more
  • 統計區間素數數量

    1 #pragma GCC optimize(2) 2 #include <bits/stdc++.h> 3 using namespace std; 4 bool isprime[1000000010]; 5 vector<int> prime; 6 inline int getlist(int ......

    uj5u.com 2020-09-10 00:57:47 more
  • C/C++編程筆記:C++中的 const 變數詳解,教你正確認識const用法

    1、C中的const 1、區域const變數存放在堆疊區中,會分配記憶體(也就是說可以通過地址間接修改變數的值)。測驗代碼如下: 運行結果: 2、全域const變數存放在只讀資料段(不能通過地址修改,會發生寫入錯誤), 默認為外部聯編,可以給其他源檔案使用(需要用extern關鍵字修飾) 運行結果: ......

    uj5u.com 2020-09-10 00:58:04 more
  • 【C++犯錯記錄】VS2019 MFC添加資源不懂如何修改資源宏ID

    1. 首先在資源視圖中,添加資源 2. 點擊新添加的資源,復制自動生成的ID 3. 在解決方案資源管理器中找到Resource.h檔案,編輯,使用整個專案搜索和替換的方式快速替換 宏宣告 4. Ctrl+Shift+F 全域搜索,點擊查找全部,然后逐個替換 5. 為什么使用搜索替換而不使用屬性視窗直 ......

    uj5u.com 2020-09-10 00:59:11 more
  • 【C++犯錯記錄】VS2019 MFC不懂的批量添加資源

    1. 打開資源頭檔案Resource.h,在其中預先定義好宏 ID(不清楚其實ID值應該設定多少,可以先新建一個相同的資源項,再在這個資源的ID值的基礎上遞增即可) 2. 在資源視圖中選中專案資源,按F7編輯資源檔案,按 ID 型別 相對路徑的形式添加 資源。(別忘了先把檔案拷貝到專案中的res檔案 ......

    uj5u.com 2020-09-10 01:00:19 more
  • C/C++編程筆記:關于C++的參考型別,專供新手入門使用

    今天要講的是C++中我最喜歡的一個用法——參考,也叫別名。 參考就是給一個變數名取一個變數名,方便我們間接地使用這個變數。我們可以給一個變數創建N個參考,這N + 1個變數共享了同一塊記憶體區域。(參考型別的變數會占用記憶體空間,占用的記憶體空間的大小和指標型別的大小是相同的。雖然參考是一個物件的別名,但 ......

    uj5u.com 2020-09-10 01:00:22 more
  • 【C/C++編程筆記】從頭開始學習C ++:初學者完整指南

    眾所周知,C ++的學習曲線陡峭,但是花時間學習這種語言將為您的職業帶來奇跡,并使您與其他開發人員區分開。您會更輕松地學習新語言,形成真正的解決問題的技能,并在編程的基礎上打下堅實的基礎。 C ++將幫助您養成良好的編程習慣(即清晰一致的編碼風格,在撰寫代碼時注釋代碼,并限制類內部的可見性),并且由 ......

    uj5u.com 2020-09-10 01:00:41 more
最新发布
  • 按鈕var到剪貼板

    在下面的函式中有這個 var 鏈接。通過單擊按鈕,我想將 var 復制到剪貼板。function displayUser(user) { var text = `Account No.: ${user.userId} <br>...

    uj5u.com 2022-05-15 21:12:27 more
  • 如何使用Object.assign()將物件添加到現有屬性?[復制]

    這個問題在這里已經有了答案:...

    uj5u.com 2022-05-15 21:11:25 more
  • 連接多個具有相同名稱和索引的物件

    串列動物.json[0:{base: {address: 'address house 1', animal: 'DOG', name: 'boby'}},1:{base: {address: 'address house 2', animal: 'CAT', name: 'pi...

    uj5u.com 2022-05-15 21:10:36 more
  • 有沒有辦法從有效性api中列出錯誤?

    所以我正在為聯系表單撰寫代碼,并且我第一次嘗試使用有效性 api,因為適應 wcag2.1 標準很難。我在寫作時能夠在每個欄位下得到錯誤,但我還需要一個框,在我提交...

    uj5u.com 2022-05-15 21:09:35 more
  • Javascript如何將整數格式化為貨幣字串?

    我有一個整數存盤為美分,即 1700 美分。如何使用 javascript 將其轉換為 $17.00 的字串?我試過了toFixed,Intl.NumberFormat但他們回傳 1700 美元?
    uj5u.co...

    uj5u.com 2022-05-15 21:08:57 more
  • 基本選項卡導航在html中不起作用

    幾乎完成,但它不作業。我認為有一個小錯誤。請糾正我的錯誤。先感謝您我只展示一個navcontent。我的頁面中已經有 Facebook 和 Instagram 的內容。這不是問...

    uj5u.com 2022-05-15 21:08:13 more
  • 根據程式名稱組合兩個資料集

    嗨,我正在努力找出實作某事的最佳方法。我實際上是在進行兩次資料庫呼叫const [emails] = await dbConnection.execute('SELECT name, programme, timestamp...

    uj5u.com 2022-05-15 21:07:25 more
  • 從firestore獲取檔案,無需搜索特定的uid

    我在獲取收藏資訊時遇到問題。使用此代碼,我只能獲取具有特定 uid 的檔案。const snapShot = doc(db, 'Files', 'someUID');const getSnapShot = await getD...

    uj5u.com 2022-05-15 21:06:11 more
  • ReactRouterDom-ReactRouter更改url但不更改頁面

    我正在嘗試使用反應制作一個簡單的路由系統,但是當我單擊鏈接導航到另一個頁面時,它只會更改 URL 但不顯示內容,然后當我按 F5 時,它會顯示一切正常。這是我的...

    uj5u.com 2022-05-15 21:04:50 more
  • SpringMVC(5)-ssm整合實作增刪改查-mybatis層

    mybatis層撰寫完畢后的專案目錄 1.右鍵SpringMVC2專案-》new-》Modual-》選擇maven專案(我的專案名為Study09_ssm),輸入模塊名,點擊Finish 2.第二部的操作就是將idea的基本運行環境搞定,包括:添加web支持,配置tomcat,配置project s ......

    uj5u.com 2022-05-15 20:25:59 more