人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

CSS・Javascriptでの質問です。

複数段にわたるものをコピーして、各段をことなるテキストボックスにペーストするということは可能でしょうか?

1段目のコピー
2段目のコピー
3段目のコピー
上記3段を選択してコピーして、下記のテキストボックスに一度のペーストでするというものです。
<input type="text" name="1">
<input type="text" name="2">
<input type="text" name="3">
本来であれば、各段をコピーしてペーストという作業を3回ずつ行わなければなりませんが、一度で済ますことが可能であればと効率があがると考えました。

そもそもこういった操作が可能なのかどうかもわからないのですが、可能であれば手法や関数についてアドバイスいただけると助かります。


●質問者: quocard
●カテゴリ:インターネット ウェブ制作
○ 状態 :終了
└ 回答数 : 1/1件

▽最新の回答へ

1 ● Cherenkov
●100ポイント ベストアンサー

javascriptだけではクリップボードを使ってコピーペーストできません。
(flashを経由する方法もあります。最新のブラウザならいけるのかも)
以下のような考えでどうでしょうか。
http://jsfiddle.net/cherenkov/pH5wc/

<html>
<head>
<meta charset="utf-8">
</head>
<body>
<input type="button" id="btn" value="output"><br>
<input type="text" name="1"><br>
<input type="text" name="2"><br>
<input type="text" name="3"><br>
<textarea id="output"></textarea>
<script>
document.getElementById('btn').addEventListener('click', function() {
 document.getElementById('output').value = document.getElementsByName('1')[0].value +'\n'+ document.getElementsByName('2')[0].value +'\n'+ document.getElementsByName('3')[0].value;
}, false);
</script>
</body>
</html>

何の目的でコピペしたいのでしょうか?quocardさん個人で使いたいシステムでユーザースクリプト等を使ってもいいですか?(拡張ならコピペが可能)
入力フォームの内容をテキストボックスに出力することは可能ですが、
シチュエーションがわからないと適切な回答ができません。

-----------

追記

上のは質問を正しく解釈していませんでした、失礼。
これでどうでしょう。選択文字列を取得するのに苦労するのでjQueryと以下のプラグインを使いました。

選択範囲のテキストを操作するjQueryプラグインjQuery.selection - 今日も適当ダイアリー


http://jsfiddle.net/cherenkov/pH5wc/2/

<html>
<head>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script src="http://www.weekendphp.com/jQuery/jquery.selection-min.js" type="text/javascript"></script>
<script>
$(function() {
 $('#btn').click(function() {
 var selectText = $.getSelection('html').split('\n');
 $('[name="1"],[name="2"],[name="3"]').each(function(i, e){
 $(this).val(selectText[i]);
 });
 });
});
</script>
</head>
<body>
<pre>
1段目のコピー
2段目のコピー
3段目のコピー
</pre>
<input type="button" id="btn" value="output"><br>
<input type="text" name="1"><br>
<input type="text" name="2"><br>
<input type="text" name="3"><br>
</body>
</html>

Cherenkovさんのコメント
あ、わかったかも。1段目のコピー?3段目のコピーを選択状態にしてからテキストボックスに出力かな。ちょっとやってみます。

Cherenkovさんのコメント
現在ボタンでペーストをしていますが「シチュエーション」次第で変えられます。

quocardさんのコメント
回答ありがとうございます。 説明不足ですいませんでした。 実際の作業としては、別のテキストにあるものをコピーペーストでテキストボックスにいれたいのですが、数が多いのである程度まとめてコピーペースト出来ればと考えておりました。 教えていただいた方法についてこれからちょっと試してみようと思います。

Cherenkovさんのコメント
「別のテキスト」も含めたHTMLを提示すればよりよい回答がつくかもしれません。 さらにカイゼンするなら、mouseupイベントハンドラを使えば、文字列を選択し終わると同時にテキストボックスに入力できたりします。
関連質問

●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ