Как сказано в моем предыдущем посте , я хочу реализовать функцию копирования и вставки на своей веб-странице.Я хотел бы использовать document.execcommand («copy») для реализации этой функции, чтобы пользователь мог использовать Ctrl-Z для отката действия копирования.Однако браузер Google Chrome, похоже, не поддерживает несколько диапазонов в выборе, поэтому мне нужно найти другое решение этой проблемы.
После поиска примера кода в Google я могу скопировать 1 ячейку таблицыданные к другому.Однако, если нет.ячейки таблицы, которая должна быть скопирована более чем на 1, это просто сохранение последнего значения источника данных в последней ячейке назначения.Все остальные значения данных не сохраняются.Вот мой код:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Copy event to clipboard</title>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script>
$( document ).ready(function() {
$("td").on("paste",function(event){
console.log("cell paste event");
var self = this;
setTimeout(function() {
self.blur();
}, 0);
});
$("body").keydown(function(event){
switch (event.which)
{
case 86://v
if (event.ctrlKey)
{
pasteDemo(event);
}
}
});
});
function pasteDemo(event)
{
console.log("Body Paste Event");
var inputBox=document.createElement("input");
var cell,cellNames=["c11","c12","c13"];
var data=["QQ","SS","RR"];
$("body").append(inputBox);
for (var i=0;i<cellNames.length;i++)
{
cell=document.getElementById(cellNames[i]);
inputBox.value=data[i];
inputBox.select();
console.log("Copy Result="+document.execCommand("copy"));
cell.focus();
console.log("Paste Result="+document.execCommand("paste"));
}
$(inputBox).remove();
}
</script>
</head>
<body>
<table border="1" id="destTable" width="500px">
<tr>
<td id="c11" contenteditable="true"></td>
<td id="c12" contenteditable="true"></td>
<td id="c13" contenteditable="true"></td>
</tr>
<tr>
<td id="c21" contenteditable="true"></td>
<td id="c22" contenteditable="true"></td>
<td id="c23" contenteditable="true"></td>
</tr>
<tr>
<td id="c31" contenteditable="true"></td>
<td id="c32" contenteditable="true"></td>
<td id="c33" contenteditable="true"></td>
</tr>
</table>
</body>
</html>
После загрузки вышеуказанной страницы, затем нажмите Ctrl-V на клавиатуре, только значение «RR» сохраняется в третьей ячейке, другие значения исчезают, как можноЯ храню другие значения в соответствующей ячейке?