通過按鈕將內容從 div 元素復制到剪貼板

Question

我正在開發一個簡單的程序，它接受用戶的輸入並對輸入值執行算術 function，然后通過 innerHTML 在 div 元素中顯示結果。 我已經嘗試使用 ClipboardJS 庫在按鈕中實現數據目標以定位 div 元素內容，但它沒有顯示任何結果。

你能幫我嗎？

 $(document).ready(function() { document.getElementById("idofdiv").style.display = "none"; document.getElementById("copybutton").style.display = "none"; $("#showbuttonid").click(function() { var a = $("input#inputvaluebox").val(); var b = a * 10; var b = "Value is" + b; document.getElementById("idofdiv").style.display = "block"; document.getElementById("copybutton").style.display = "block"; document.getElementById("idofdiv").innerHTML = b; }); });

 @import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@600&display=swap'); .labelclass { font-size: 20px; font-family: 'Open Sans', sans-serif; }.inputvaluecss { box-sizing: border-box; border: 1px solid #DDDDDD; outline: none; margin-left: 42px; margin-top: 16px; width: 275px; padding-top: 12px; padding-left: 15px; padding-bottom: 12px; }.inputvaluecss:focus { box-shadow: 0 0 5px #2EDC29; border: 1px solid #2EDC29; }.divclass { font-size: 20px; font-family: 'Open Sans', sans-serif; color: black; background-color: white; width: 700px; padding-left: 18px; padding-top: 13px; padding-bottom: 13px; padding-right: 18px; box-sizing: border-box; border: 1px solid #DDDDDD; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/clipboard@2/dist/clipboard.min.js"></script> <form> <br> <label for="inputvaluebox" class="labelclass">Input Value</label> <input type="text" id="inputvaluebox" name="inputvaluename" class="inputvaluecss"><br><br> <input type="reset" id="resetbuttonid"> <button type="button" id="showbuttonid">Show</button><br><br><br> <div id="idofdiv" class="divclass"></div><br> <button type="button" id="copybutton" data-clipboard-target="#idofdiv">Copy content!</button> </form>

Answer 1

您正在做的是嘗試將數學函數添加到字符串在您的情況下， a是字符串， b是數字所以您嘗試將a轉換為數字，將b轉換為字符串。 那行不通 這對我有用

$(document).ready(function() {
  document.getElementById("idofdiv").style.display = "none";
  document.getElementById("copybutton").style.display = "none";

  $("#showbuttonid").click(function() {
    var a = $("input#inputvaluebox").val();
    var c = parseInt(a)
    var b = c * 10;
    var d = "Value is" + b;
    document.getElementById("idofdiv").style.display = "block";
    document.getElementById("copybutton").style.display = "block";
    document.getElementById("idofdiv").innerHTML = d;
  });
});

Answer 2

你只需要多一行代碼。 只需閱讀官方文檔： https://clipboardjs.com/#setup

  new ClipboardJS('#copybutton')

 $(document).ready(function() { document.getElementById("idofdiv").style.display = "none"; document.getElementById("copybutton").style.display = "none"; $("#showbuttonid").click(function() { var a = $("input#inputvaluebox").val(); var b = a * 10; var b = "Value is " + b; document.getElementById("idofdiv").style.display = "block"; document.getElementById("copybutton").style.display = "block"; document.getElementById("idofdiv").innerHTML = b; }); new ClipboardJS('#copybutton') });

 @import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@600&display=swap'); .labelclass { font-size: 20px; font-family: 'Open Sans', sans-serif; }.inputvaluecss { box-sizing: border-box; border: 1px solid #DDDDDD; outline: none; margin-left: 42px; margin-top: 16px; width: 275px; padding-top: 12px; padding-left: 15px; padding-bottom: 12px; }.inputvaluecss:focus { box-shadow: 0 0 5px #2EDC29; border: 1px solid #2EDC29; }.divclass { font-size: 20px; font-family: 'Open Sans', sans-serif; color: black; background-color: white; width: 700px; padding-left: 18px; padding-top: 13px; padding-bottom: 13px; padding-right: 18px; box-sizing: border-box; border: 1px solid #DDDDDD; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/clipboard@2/dist/clipboard.min.js"></script> <form> <br> <label for="inputvaluebox" class="labelclass">Input Value</label> <input type="text" id="inputvaluebox" name="inputvaluename" class="inputvaluecss"><br><br> <input type="reset" id="resetbuttonid"> <button type="button" id="showbuttonid">Show</button><br><br><br> <div id="idofdiv" class="divclass"></div><br> <button type="button" id="copybutton" data-clipboard-target="#idofdiv">Copy content!</button> </form>