はじめに
Excel から Excel へなら、複数のセル（複数の項目）を一度にコピペすることができます。しかし Excel から Web フォーム上へデータをコピペしたい場合は、なにもしなければ１セル（１項目）ずつコピペしていくしかありません。
Web フォームに Excel（など）ワークシートから値をコピペしたい要件があるかもしれません。
そのようなときには運用を考え直していただく次のようなサンプルが役に立つかもしれません。
サンプル
-
単独の項目だけをペーストしたいときのために、３列なければ普通のペーストにしています。
// Ignore less then 3.の部分です。 -
どの入力欄でペーストしても左上の欄からペーストしたような動きになります。
<html>
<head>
<meta charset="utf-8">
<title></title>
<meta name="description" content="">
<meta name="author" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('.excel-receiver').on('paste', function (e) {
var data = e.originalEvent.clipboardData.getData('Text');
//var data = window.clipboardData.getData('Text'); //IE
var elems = $('.excel-receiver');
var n = 0;
var max = elems.length;
var rows = data.split('\n');
for (var i = 0; i < rows.length; i++) {
var fields = rows[i].split('\t');
if (fields.length < 3) return; // Ignore less then 3.
for (var j = 0; j < fields.length; j++) {
elems[n++].value = fields[j];
if (n >= max) {break;}
}
if (n >= max) {break;}
}
e.preventDefault();
});
});
</script>
<style type="text/css">
input[type="text"].excel-receiver {
width: 100%;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
td {
width: 100px;
}
</style>
</head>
<body>
<table>
<tr>
<td><input class='excel-receiver' type='text' /></td>
<td><input class='excel-receiver' type='text' /></td>
<td><input class='excel-receiver' type='text' /></td>
</tr>
<tr>
<td><input class='excel-receiver' type='text' /></td>
<td><input class='excel-receiver' type='text' /></td>
<td><input class='excel-receiver' type='text' /></td>
</tr>
</table>
</body>
</html>
免責
いろいろ使ってみるとわかると思いますが、セルの数と入力欄の数が一致しない場合、ユーザーがどのような操作の結果を期待するかが不明瞭であるというリスクがあります。テストデータの入力くらいにしか使えないバッドノウハウかもしれませんが、ま、ネタということで。