https://jsfiddle.net/coderomeos/402olqrf/
我想使用下面的代码,它可以完美地在一个文档中复制文本。我想将其更改为处理两列表,只复制第2列。
任何帮助都将不胜感激。工作示例位于顶部链接中。
<div class="container">
<div class='copied'></div>
<div class="copy-to-clipboard">
<input readonly type="text" value="Click Me To Copy" readonly>
</div>
</div>
$(function() {
$('.copy-to-clipboard input').click(function() {
$(this).focus();
$(this).select();
document.execCommand('copy');
$(".copied").text("Copied to clipboard").show().fadeOut(2500);
});
});
.container {
max-width: 25rem;
background: #f7f7f7;
margin: 2rem auto;
position: relative;
padding: 2rem;
.copy-to-clipboard input {
border: none;
background: #fff;
padding: 0.5rem;
width: 100%;
cursor: pointer;
box-sizing: border-box;
}
.copied {
position: absolute;
background: #6ce890;
color: #000;
padding: 0.2rem;
font-weight: bold;
z-index: 99;
bottom: 0;
text-align: center;
display: none;
font-size: .8rem;
}
}
The code in the example above is what I want to use but instead of all the text in a <div> only make column 2 able to be copied.
So say the first row of a 2 column table has the following:
Column1 Column2
Sometext column 1 Some text column 2
only copy Some text in Column 2 to the clipboard.
1条答案
按热度按时间zzlelutf1#
假设您将使用表结构,您可以使用
$(this).closest('td').next('td').find('input')
```$(function() {
$('.copy-cell').click(function() {
const other = $(this).next('td')
other.find('input').focus();
other.find('input').select();
document.execCommand('copy');
$(".copied").text("Copied to clipboard").show().fadeOut(2500);
});
});
.container td {
max-width: 25rem;
background: #f7f7f7;
margin: 2rem auto;
position: relative;
padding: 2rem;
}
td.copy-cell {
cursor: pointer;
}
input {
border: none;
background: #fff;
padding: 0.5rem;
width: 100%;
box-sizing: border-box;
}
.copied {
position: absolute;
background: #6ce890;
color: #000;
padding: 0.2rem;
font-weight: bold;
z-index: 99;
bottom: 0;
text-align: center;
display: none;
font-size: .8rem;
}