javascript - 多个复制到剪贴板按钮 - 从按钮本身复制文本
问题描述
我正在尝试为法语特殊字符构建类似于虚拟键盘的东西,因此用户可以通过单击特殊字符按钮轻松复制它们并将它们粘贴到需要的地方。我在 javascript 方面不是很好,并且一直在努力使用我发现的一些代码来创建我需要的东西。到目前为止,我可以使用此代码使其仅适用于一个按钮。
对于我的 html(只是摘录)
<div class="copy_btn_container">
<div class="copy_btn_block">
<p>Accents graves et accents aigüs<p>
<button onclick="copyStringToClipboard()" id = 'accbtn1' data-target="accbtn1" class="copy_btn">é</button>
<button onclick="copyStringToClipboard()" id = 'accbtn2' data-target="accbtn2" class="copy_btn">è</button>
<button onclick="copyStringToClipboard()" id = 'accbtn3' data-target="accbtn3" class="copy_btn">à</button>
<button onclick="copyStringToClipboard()" id = 'accbtn4' data-target="accbtn4" class="copy_btn">ù</button>
</div>
</div>
我的javascript是
function copyStringToClipboard () {
var str = document.getElementById("accbtn1").innerText;
// Create new element
var el = document.createElement('textarea');
// Set value (string to be copied)
el.value = str;
// Set non-editable to avoid focus and move outside of view
el.setAttribute('readonly', '');
el.style = {position: 'absolute', left: '-9999px'};
document.body.appendChild(el);
// Select text inside element
el.select();
// Copy text to clipboard
document.execCommand('copy');
// Remove temporary element
document.body.removeChild(el);
}
所以我知道 document.getElementById 只接受一个元素,所以我尝试了 document.getElementsByClassName 但它返回一个“未定义”值。我也对 js 的其他方式持开放态度,因为我看到可以使用常量等,但是所有示例都旨在从输入字段中复制值,并且由于某种原因我无法管理不要调整他们开始复制按钮的文本。
任何帮助,将不胜感激 !谢谢
解决方案
您可以将 id 或 data 属性传递给您的函数,如下所示:
function copyStringToClipboard (target) {
var str = document.getElementById(target).innerText;
// Create new element
var el = document.createElement('textarea');
// Set value (string to be copied)
el.value = str;
// Set non-editable to avoid focus and move outside of view
el.setAttribute('readonly', '');
el.style = {position: 'absolute', left: '-9999px'};
document.body.appendChild(el);
// Select text inside element
el.select();
// Copy text to clipboard
document.execCommand('copy');
// Remove temporary element
document.body.removeChild(el);
}
<div class="copy_btn_container">
<div class="copy_btn_block">
<p>Accents graves et accents aigüs<p>
<button onclick="copyStringToClipboard(this.getAttribute('data-target'))" id = 'accbtn1' data-target="accbtn1" class="copy_btn">é</button>
<button onclick="copyStringToClipboard(this.getAttribute('data-target'))" id = 'accbtn2' data-target="accbtn2" class="copy_btn">è</button>
<button onclick="copyStringToClipboard(this.getAttribute('data-target'))" id = 'accbtn3' data-target="accbtn3" class="copy_btn">à</button>
<button onclick="copyStringToClipboard(this.getAttribute('data-target'))" id = 'accbtn4' data-target="accbtn4" class="copy_btn">ù</button>
</div>
</div>
推荐阅读
- android - 无法在 react-native 中安装应用程序
- r - 在不指定列名的情况下将字符串转换为 R 中的分类变量
- django - 如何在 django 通用视图中实现命中计数
- c - 解析数学公式
- c++ - 在 Visual Studio 调试器下,C++ 异常会减慢 3dsmax
- java - 使用 PDF/A 一致性时,OpenHtmlToPdf 会导致错误
- rules - 无法在 CLIPS 中实现 Bind 功能
- php - 如何将数组从 Laravel Blade 传递到 Laravel 6/Vue 2.6 中的 Vue 组件。*
- r - 预先使用 auto.arima 检测错误(xreg 等级不足/系统完全是奇异的)
- swift - SwiftUI Facebook 登录 - 注入环境对象后移动应用程序仍然崩溃