您能否请一看这个演示,让我知道为什么我点击td
时无法复制之前的.btn-copy
文字?
$('.btn-copy').on('click', function(){
$(this).closest('td').prev('td').select();
try {
var successful = document.execCommand('copy');
if(successful) {
$('.res').html("Coppied");
}
else
{ $('.res').html("Unable to copy!");}
} catch (err) {
$('.res').html(err);
}
});
table{border:1px solid #ccc;}
td{border:1px solid #ccc;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="res"></div>
<table>
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
<th>Copy</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td><button class="btn btn-default btn-copy">Copy</button></td>
<td>Germany</td>
</tr>
<tr>
<td>Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
<td>Mexico</td>
<td><button class="btn btn-default btn-copy">Copy</button></td>
</tr>
<tr>
<td>Ernst Handel</td>
<td><button class="btn btn-default btn-copy">Copy</button></td>
<td>Roland Mendel</td>
<td>Austria</td>
</tr>
<tr>
<td>Island Trading</td>
<td>Helen Bennett</td>
<td><button class="btn btn-default btn-copy">Copy</button></td>
<td>UK</td>
</tr>
<tr>
<td>Laughing Bacchus Winecellars</td>
<td>Yoshi Tannamuri</td>
<td>Canada</td>
<td><button class="btn btn-default btn-copy">Copy</button></td>
</tr>
<tr>
<td>Magazzini Alimentari Riuniti</td>
<td><button class="btn btn-default btn-copy">Copy</button></td>
<td>Giovanni Rovelli</td>
<td>Italy</td>
</tr>
</table>
答案 0 :(得分:1)
你仍然可以使用document.execCommand('copy');
,但是你的文字没有正确选择,这应该解决它:
$('.btn-copy').on('click', function(){
element = $(this).closest('td').prev('td')[0];
var selection = window.getSelection();
var range = document.createRange();
range.selectNodeContents(element);
selection.removeAllRanges();
selection.addRange(range);
//Losely basd on http://stackoverflow.com/a/40734974/7668911
try {
var successful = document.execCommand('copy');
if(successful) {
$('.res').html("Coppied");
}
else
{ $('.res').html("Unable to copy!");}
} catch (err) {
$('.res').html(err);
}
});
&#13;
table{border:1px solid #ccc;}
td{border:1px solid #ccc;}
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="res"></div>
<table>
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
<th>Copy</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td><button class="btn btn-default btn-copy">Copy</button></td>
<td>Germany</td>
</tr>
<tr>
<td>Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
<td>Mexico</td>
<td><button class="btn btn-default btn-copy">Copy</button></td>
</tr>
<tr>
<td>Ernst Handel</td>
<td><button class="btn btn-default btn-copy">Copy</button></td>
<td>Roland Mendel</td>
<td>Austria</td>
</tr>
<tr>
<td>Island Trading</td>
<td>Helen Bennett</td>
<td><button class="btn btn-default btn-copy">Copy</button></td>
<td>UK</td>
</tr>
<tr>
<td>Laughing Bacchus Winecellars</td>
<td>Yoshi Tannamuri</td>
<td>Canada</td>
<td><button class="btn btn-default btn-copy">Copy</button></td>
</tr>
<tr>
<td>Magazzini Alimentari Riuniti</td>
<td><button class="btn btn-default btn-copy">Copy</button></td>
<td>Giovanni Rovelli</td>
<td>Italy</td>
</tr>
</table>
&#13;
答案 1 :(得分:1)
jQuery select
方法仅适用于<input>
字段和<textarea>
。您需要使用DOM Range方法:
$('.btn-copy').on('click', function(){
try {
var cell = $(this).closest('td').prev('td')[0];
var selection = window.getSelection();
var range = document.createRange();
range.selectNodeContents(cell);
selection.removeAllRanges();
selection.addRange(range);
var successful = document.execCommand('copy');
if(successful) {
$('.res').html("Coppied");
}
else
{
$('.res').html("Unable to copy!");
}
} catch (err) {
$('.res').html(err);
}
});
答案 2 :(得分:0)
据我所知,
document.execCommand('copy');
出于安全原因,很久以前就停止了所有主流浏览器的工作。