LoginSignup
13
19

More than 5 years have passed since last update.

Excel から Web フォームに一括ペースト

Last updated at Posted at 2018-05-17

はじめに

Excel から Excel へなら、複数のセル(複数の項目)を一度にコピペすることができます。しかし Excel から Web フォーム上へデータをコピペしたい場合は、なにもしなければ1セル(1項目)ずつコピペしていくしかありません。

Web フォームに Excel(など)ワークシートから値をコピペしたい要件があるかもしれません。

そのようなときには運用を考え直していただく次のようなサンプルが役に立つかもしれません。

サンプル

  • 単独の項目だけをペーストしたいときのために、3列なければ普通のペーストにしています。// 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>

免責

いろいろ使ってみるとわかると思いますが、セルの数と入力欄の数が一致しない場合、ユーザーがどのような操作の結果を期待するかが不明瞭であるというリスクがあります。テストデータの入力くらいにしか使えないバッドノウハウかもしれませんが、ま、ネタということで。

13
19
2

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
13
19