コピーされたデータをボタンをクリックすれば一気にペーストされるようにする

エクセルの
A1セル：東京都
A2セル：埼玉県
A3セル：神奈川県
A4セル：千葉県
A5セル：茨城県

と入力されていたとして、
これを東京都～茨城県まで範囲コピーして
html上にテキストボックスが5個並んでいたとした時

ボタンを1回クリックすると
テキストボックス1：東京都
テキストボックス2：埼玉県
テキストボックス3：神奈川県
テキストボックス4：千葉県
テキストボックス5：茨城県

と一気に入力されるようにしたいです。
よろしくお願いします。

m.ts10806

2018/10/10 10:18

できるところまで自身で組んでみてください。この質問内容ですと丸投げな上に問題課題がありません。

行動規範の内容に同意します

回答2件

ベストアンサー

clipboardData属性を使用したい場合、DataTransferインターフェイスのインスタンスで、ユーザが行ったカット・コピー・ペーストの操作時にのみ使用可能なので、一度それらのイベントを発生させる必要があります。
それでもいいのであれば、下記のサンプルで

使い方は、ExcelのA1,A2,A3,A4,A5セルをコピー後、「ここにペーストしてください」のテキストエリアにペーストするだけです。
単にExcelの縦A1,A2,A3,A4,A5セルを５つの<INPUT>タグのvalueにセットするだけの例です。
エラー処理とか各種チェック等は、ご自分で実装して下さい。

HTML
1<body>
2
3	<textarea id="test" rows="4" cols="40">ここにペーストしてください。</textarea>
4	<br/>
5	<input type="text" name="hoge"  value="" />
6	<input type="text" name="hoge"  value="" />
7	<input type="text" name="hoge"  value="" />
8	<input type="text" name="hoge"  value="" />
9	<input type="text" name="hoge"  value="" />
10
11	<script>
12	(function (){
13		if(!window.addEventListener) return;
14		var element = document.getElementById("test");
15		element.addEventListener("paste" , function(e){
16			e.preventDefault();		/* デフォルトアクション(ペースト)を抑止 */
17			var clip_data = (e.clipboardData) || (window.clipboardData);
18			try{
19				data = clip_data.getData("text");
20				/* Excelの縦(A1,A2,A3・・) \n で分割 */
21				result = data.split('\n')
22				var nodeList = document.getElementsByName("hoge") ;
23				nodeList[0].value = result[0];
24				nodeList[1].value = result[1];
25				nodeList[2].value = result[2];
26				nodeList[3].value = result[3];
27				nodeList[4].value = result[4];
28			}catch(e){
29			}
30		});
31	})();
32	</script>
33
34</body>