ボタンを押下するとテキストフォームの値をクリップボードに送るJS

解決済

質問者：litton101
質問日時：2010/05/17 23:25
回答数：5件

ボタンを押下するとテキストフォームの値をクリップボードに送るJS

以下のテキストフォームの脇にあるボタンを押すと、「テキストフォームの値＋.jpg」のをクリップボードにコピーするJSをご教示ください。
たとえば、一行目のボタンを押下すると、「鳩山.jpg」という文字列がクリップボードに送られるイメージです。

よろしくお願い致します。

<html>
<head>
<script>
//-->
</script>
</head>
<body>
<form action="xxxxx" method="post">
<table border="1">
<tr>
<td>1</td>
<td><input name="mytext[]" value="鳩山"></td>
<td><input type="button" name="Copy" value="コピー"></td>
</tr>
<tr>
<td>2</td>
<td><input name="mytext[]" value="小沢"></td>
<td><input type="button" name="Copy" value="コピー"></td>
</tr>
<tr>
<td>3</td>
<td><input name="mytext[]" value="平野"></td>
<td><input type="button" name="Copy" value="コピー"></td>
</tr>
<tr>
<td>4</td>
<td><input name="mytext[]" value="管"></td>
<td><input type="button" name="Copy" value="コピー"></td>
</tr>
</table>
</form>
</body>
</html>

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (5件)

ベストアンサー優先
最新から表示
回答順に表示

No.5ベストアンサー

回答者： yyr446
回答日時：2010/05/19 11:11

alert("クリップボードにコピーしました");の部分は、アラートでなく、文字列選択状態にしてコピーされたことを示したいのですが、

＝＝＞
target.select();とすると一応選択状態の表示になります。
alert("クリップボードにコピーしました");を
target.select();
if(confirm("クリップボードにコピーしました。\nペーストし終わりましたか?")==true){
target.blur();
target.nextSibling.focus();
}
にしてみましたが、やはりformじゃないので選択状態表示の解除は出来ませんね。
どこか別の場所をクリックすると解除されるのですが．．．

- 0
- 件

通報する

この回答へのお礼

yyr446さん、何からなにまで本当にありがとうございます。

> target.select();とすると一応選択状態の表示になります。

おお、できました、できました。

これだけでも、達成感十分でしたが、

> if(confirm("クリップボードにコピーしました。\nペーストし終わりましたか?")==true){

ここまでできればもっといいですね。

> にしてみましたが、やはりformじゃないので選択状態表示の解除は出来ませんね。

いわれなかったら気にしなかったと思いますが、
ご指摘いただくと確かにきになります(^_^;

でも十分満足なものになりました。ありがとうございました。

通報する

お礼日時：2010/05/19 21:45

No.4

回答者： yyr446
回答日時：2010/05/19 10:39

例示いただいたHTMLとは、テーブルの列数が違うのが原因でしょうか？

＝＞はいそうです。
コピーしたいテキストボックスは、９列目の最初の子要素ですから
var target=table.rows[t.parentNode.parentNode.rowIndex].cells[8].firstChild;
となります。
汎用的に作るには、工夫がいりますね．．

- 0
- 件

通報する

この回答へのお礼

yyr446さん、たびたびご回答ありがとうございました。

＞汎用的に作るには、工夫がいりますね．．

とんでもないです、これで十二分に使い倒せます。大変助かりました。

今後とも何かと活用させていただきます。ありがとうございました。

通報する

お礼日時：2010/05/19 21:38

No.3

回答者： yyr446
回答日時：2010/05/18 16:50

IEだけでよいなら、INPUT要素を的確に選択出来れば、出来ます。

ご提示のtableの場合だと
<form action="xxxxx" method="post">
<table id="target_table" border="1">
<tr>
<td>1</td>
<td><input name="mytext[]" value="鳩山"></td>
<td><input type="button" name="Copy" value="コピー"></td>
</tr>
<tr>
<td>2</td>
<td><input name="mytext[]" value="小沢"></td>
<td><input type="button" name="Copy" value="コピー"></td>
</tr>
<tr>
<td>3</td>
<td><input name="mytext[]" value="平野"></td>
<td><input type="button" name="Copy" value="コピー"></td>
</tr>
<tr>
<td>4</td>
<td><input name="mytext[]" value="管"></td>
<td><input type="button" name="Copy" value="コピー"></td>
</tr>
</table>
</form>
<script type="text/javascript" charset="utf-8">

</script>
</body>

- 0
- 件

通報する

この回答へのお礼

yyr446さん、ご回答ありがとうございます。IEだけで動作すれば十分です。

ご提示いただいたスクリプトはバッチリ動きました。

これを以下に例示する本番環境に組み込んでみたところ、スクリプトエラーになってしまいますが、
例示いただいたHTMLとは、テーブルの列数が違うのが原因でしょうか？

ついでに、
alert("クリップボードにコピーしました");
の部分は、アラートでなく、文字列選択状態にしてコピーされたことを示したいのですが、山勘で
copy_obj.select
などと変更してみましたが、うんともすんともいいません。

もしよろしければ、こちらもご教示いただけますと幸いです。

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
</head>

<body>
<form method="post" action="">
<table border="1" id="target_table">
<tr>
<td>あ</td>
<td>い</td>
<td>う</td>
<td>ええええ</td>
<td>おおおおおおおおおおおおお</td>
<td>中国から</td>
<td><input type="checkbox" name="val1[]" value="1" checked>
<td><input type="checkbox" name="val2[]" value="1">
<td><input name="mytext[]" value="た_かかかかか_きききき.jpg"><input type="button" name="Copy" value="コピー"></td>
</tr>
</table>
</form>
<script type="text/javascript" charset="utf-8">

</script>

</body>
</html>

通報する

お礼日時：2010/05/19 09:39

No.2

回答者： yambejp
回答日時：2010/05/18 00:01

ブラウザからjavascriptの機能のみでクリップボードへアクセスすることは

セキュリティ上できません。
フラッシュのツールを使う方法がよく解説されていたりしますが、
ブラウザの種類やバージョンによって挙動が大きく異なるようです。
現実的に考えればできないものと理解した方がいいでしょう。
（どうしてもという場合は前述のフラッシュをさがしてください）

- 0
- 件

通報する

この回答へのお礼

yambejpさん、いつもお世話になってます。
フラッシュの方法をご教示いただきありがとうございました。

＃１さんへの御礼に書いたように、もう一歩のところまではいけましたが、
ここで頓挫しています。

引き続き調べてみます。

通報する

お礼日時：2010/05/18 12:53

No.1

回答者： notnot
回答日時：2010/05/17 23:59

無理です。

JavaScriptでクリップボードをいじれたら、セキュリティホールです。
クリップボードをいじりたいならブラウザのプラグインなどで実現するしかない。

他の方法としては、prompt() で、表示してユーザに自分でコピーしてもらう。
prompt("コピーしてください",text);

- 0
- 件

通報する

この回答へのお礼

notnotさん、prompt() によるアドバイスありがとうございました。

すみません、自分でもよく調べてみましたら、以下を参考にあと一歩まで実現できました。
http://javascriptmarket.com/script/jsm34.html

ただ、<form>の中に<form>の入れ子になっているので、このままではだめなようです。
引き続き検討してみます。まずは御礼まで。

<html>
<head>
<script>
function clip_copy() {
if (document.all && navigator.userAgent.match(/windows/i) && document.obj.area.value) {
copy_obj = document.obj.area.createTextRange()
copy_obj.execCommand("Copy")
alert("クリップボードにコピーしました");
}
}
</script>
</head>
<body>
<form name="obj">
<input type="text" name="area" value="テスト文字列">
<input type="button" onClick="obj.area.select(); clip_copy();" value="コピー">
</form>
</body>
</html>