通过按钮将 div 元素的内容复制到剪贴板

Question

我正在开发一个简单的程序，它从用户那里获取输入并对输入值执行算术函数，然后通过 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>

通过按钮将 div 元素的内容复制到剪贴板

Copy content from div element via button to clipboard

html

javascript

css

jquery

clipboard.js