个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
25
4
我已经搜索了这个站点的类似问题，但我仍然一头雾水。
基本上，我正在为即将离职的同事接手一个项目。他的 Intranet 页面计划应该有多个文本区域，每个文本区域都有自己的预定义文本和自己的“复制文本”按钮。
点击后，它会复制到用户的剪贴板。我拆开了代码，无论出于何种原因，当我添加新的文本区域和按钮时，它都不会复制。第一个会。
我错过了什么或做错了什么？
<html>
<head>
<script>
window.onload = function () {
var copyTextareaBtn = document.querySelector('.js-textareacopybtn');
copyTextareaBtn.addEventListener('click', function (event) {
var copyTextarea = document.querySelector('.js-copytextarea');
copyTextarea.select();
try {
var successful = document.execCommand('copy');
var msg = successful ? 'successful' : 'unsuccessful';
console.log('Copying text command was ' + msg);
} catch (err) {
console.log('Whoops, unable to copy');
}
});
}
</script>
</head>
<body>
<p>Test #1 </p>
<div>
<textarea class="js-copytextarea" readonly="readonly" style="width:20%;"
rows="5">Hello. This is textarea test bed #1</textarea>
<button class="js-textareacopybtn">Copy Text (works)</button>
<p>Test #2:</p>
<textarea class="js-copytextarea" readonly="readonly" style="width:20%;"
rows="5">Hi! Welcome to textarea test bed #2 </textarea>
<button class="js-textareacopybtn">Copy Text (broken)</button>
</div>
</body>
</html>
最佳答案
它不起作用，因为您只将第一个按钮连接到点击事件，因为您只获得对第一个按钮的引用:
var copyTextareaBtn = document.querySelector('.js-textareacopybtn');
将其更改为:
var copyTextareaBtn = document.querySelectorAll('.js-textareacopybtn');
.querySelector() 只返回对它找到的与选择器匹配的第一个元素的引用。 <强> querySelectorAll() 返回一个节点列表，其中包含与选择器匹配的所有元素。
接下来，您需要将点击事件附加到该节点列表中的每个元素，如果您将这些节点列表转换为数组， .forEach() 方法使循环变得非常容易。
查看下面更新的代码:
window.onload = function () {
// Get all the elements that match the selector as arrays
var copyTextareaBtn = Array.prototype.slice.call(document.querySelectorAll('.js-textareacopybtn'));
var copyTextarea = Array.prototype.slice.call(document.querySelectorAll('.js-copytextarea'));
// Loop through the button array and set up event handlers for each element
copyTextareaBtn.forEach(function(btn, idx){
btn.addEventListener("click", function(){
// Get the textarea who's index matches the index of the button
copyTextarea[idx].select();
try {
var msg = document.execCommand('copy') ? 'successful' : 'unsuccessful';
console.log('Copying text command was ' + msg);
} catch (err) {
console.log('Whoops, unable to copy');
}
});
});
}<div>
<p>Test #1
<textarea class="js-copytextarea" readonly="readonly" style="width:20%;"
rows="5">Hello. This is textarea test bed #1</textarea>
<button class="js-textareacopybtn">Copy Text (works)</button>
</p>
<p>Test #2:
<textarea class="js-copytextarea" readonly="readonly" style="width:20%;"
rows="5">Hi! Welcome to textarea test bed #2 </textarea>
<button class="js-textareacopybtn">Copy Text (broken)</button>
</p>
</div>关于Javascript - 在一页上复制多个文本区域的文本按钮，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45472971/
25
4
0
我正在编写一个应用程序，允许用户创建一个“问卷”，然后向其中添加问题。我正在使用核心数据来存储信息。我创建了一个问卷实体，并与问题实体建立了“一对多”关系。我的问题是，如果要允许用户复制(复制)整个调
有没有办法复制或复制 SharedPreference？或者我需要从一个变量中获取每个变量，然后将它们放入另一个变量中吗？ 最佳答案 尝试这样的事情: //sp1 is the shared pref
下面的(A)和(B)有区别吗？ (假设 NON ARC，如果重要的话) // --- (A) --- @interface Zoo : NSObject{} @property (copy) Dog
我正在尝试将 mysql SELECT 查询保存到文件中，如下所示: $result = mysqli_query($db,$sql); $out = fopen('tmp/csv.csv', 'w'
我需要创建一个 CVPixelBufferRef 的副本，以便能够使用副本中的值以按位方式操作原始像素缓冲区。我似乎无法使用 CVPixelBufferCreate 或 CVPixelBufferCr
我在 Source 文件夹中有一个 Active wave 录音 wave-file.wav。我需要使用新名称 wave-file-copy.wav 将此文件复制到 Destination 文件夹。
在使用 GNU Autotools 构建的项目中，我有一个脚本需要通过 make 修改以包含安装路径。这是一个小例子: configure.ac: AC_INIT(foobar, 1.0) AC_PR
我想将 SQL 的行复制到同一个表中。但是在我的表中，我有一个“文本”列。 使用此 SQL: CREATE TEMPORARY TABLE produit2 ENGINE=MEMORY SELECT
谁能给我解释一下 df2 = df1 df2 = df1.copy() df3 = df1.copy(deep=False) 我已经尝试了所有选项并执行了以下操作: df1 = pd.DataFram
Hazelcast 是否具有类似于 Ehcache 的复制？ http://www.ehcache.org/generated/2.9.0/pdf/Ehcache_Replication_Guide.
我有以下拓扑。一个 Ubuntu 16.04。运行我的全局 MySQL 服务器的 Amazon AWS 上的实例。我想将此服务器用作许多本地主服务器(Windows 机器 MySQL 服务器)的从服务
使用 SQLyog，我正在测试表中是否设置了正确的值。我尝试过 SELECT type_service FROM service WHERE email='test@gmail.com' 因此，只输出
有人可以提供一些关于如何配置 ElasticSearch 进行复制的说明。我在 Windows 中运行 ES，并且了解如果我在同一台服务器上多次运行 bat 文件，则会启动一个单独的 ES 实例，并且
一 点睛 ThreadGroup 复制线程的两个方法。 public int enumerate(Thread list[]) // 会将 ThreadGroup 中的 active 线程全部复制到
一 点睛 ThreadGroup 复制线程组的两个方法。 public int enumerate(ThreadGroup list[]) // 相对于 enumerate（list,true） pu
官方documentation Cassandra 说: Configure the keyspace and create the new datacenter: Use ALTER KEYSPAC
This question already has answers here: How to weight smoothing by arbitrary factor in ggplot2? (2个答
我们有一个表格来表明对各种俱乐部的兴趣。输出将数据记录在 Excel 电子表格中，其中列有他们的首选姓名、姓氏、电子邮件、代词，以及他们感兴趣的俱乐部的相应列中的“1”(下面的模型)。 我们希望为俱乐
This question already has answers here: Closed 8 years ago. Possible Duplicate: In vim, how do I get
如何复制形状及其所在的单元格？当我手动复制时，形状会跟随单元格，但是当我使用宏进行复制时，我会得到除形状之外的所有其他内容。 Cells(sourceRow, sourceColumn).Copy C
我是一名优秀的程序员,十分优秀！