- ベストアンサー
ボタンを押下するとテキストフォームの値をクリップボードに送るJS
- 以下のテキストフォームの脇にあるボタンを押すと、「テキストフォームの値＋.jpg」のをクリップボードにコピーするJSをご教示ください。
- たとえば、一行目のボタンを押下すると、「鳩山.jpg」という文字列がクリップボードに送られるイメージです。
- HTMLのフォーム内には4つのテキストフォームがあり、それぞれの値に対応するコピー用のボタンがあります。
- litton101
- お礼率89% (1106/1240)
- JavaScript
- 回答数5
- ありがとう数14
- みんなの回答 （5）
- 専門家の回答
質問者が選んだベストアンサー
alert("クリップボードにコピーしました");の部分は、アラートでなく、文字列選択状態にしてコピーされたことを示したいのですが、 ＝＝＞ target.select();とすると一応選択状態の表示になります。 alert("クリップボードにコピーしました");を target.select(); if(confirm("クリップボードにコピーしました。\nペーストし終わりましたか?")==true){ target.blur(); target.nextSibling.focus(); } にしてみましたが、やはりformじゃないので選択状態表示の解除は出来ませんね。 どこか別の場所をクリックすると解除されるのですが．．．
その他の回答 (4)
- yyr446
- ベストアンサー率65% (870/1330)
例示いただいたHTMLとは、テーブルの列数が違うのが原因でしょうか？ ＝＞はいそうです。 コピーしたいテキストボックスは、９列目の最初の子要素ですから var target=table.rows[t.parentNode.parentNode.rowIndex].cells[8].firstChild; となります。 汎用的に作るには、工夫がいりますね．．
お礼
yyr446さん、たびたびご回答ありがとうございました。 ＞汎用的に作るには、工夫がいりますね．． とんでもないです、これで十二分に使い倒せます。大変助かりました。 今後とも何かと活用させていただきます。ありがとうございました。
- yyr446
- ベストアンサー率65% (870/1330)
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"> <!-- var table=document.getElementById("target_table"); var btns=document.getElementsByName("copy"); for(var i=0;i<btns.length;i++){ btns[i].onclick=(function(table){return function(e){ var t = e?e.target:event.srcElement; //IEだけならこれはいらんか！ var target=table.rows[t.parentNode.parentNode.rowIndex].cells[1].firstChild; var copy_obj=target.createTextRange(); copy_obj.execCommand("Copy") alert("クリップボードにコピーしました"); }})(table); } // --> </script> </body>
お礼
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"> <!-- var table=document.getElementById("target_table"); var btns=document.getElementsByName("copy"); for (var i=0; i< btns.length; i++) { btns[i].onclick=(function(table){return function(e) { var t = e?e.target:event.srcElement; //IEだけならこれはいらんか！ var target=table.rows[t.parentNode.parentNode.rowIndex].cells[1].firstChild; var copy_obj=target.createTextRange(); copy_obj.execCommand("Copy") alert("クリップボードにコピーしました"); }})(table); } // --> </script> </body> </html>
- yambejp
- ベストアンサー率51% (3827/7415)
ブラウザからjavascriptの機能のみでクリップボードへアクセスすることは セキュリティ上できません。 フラッシュのツールを使う方法がよく解説されていたりしますが、 ブラウザの種類やバージョンによって挙動が大きく異なるようです。 現実的に考えればできないものと理解した方がいいでしょう。 （どうしてもという場合は前述のフラッシュをさがしてください）
お礼
yambejpさん、いつもお世話になってます。 フラッシュの方法をご教示いただきありがとうございました。 ＃１さんへの御礼に書いたように、もう一歩のところまではいけましたが、 ここで頓挫しています。 引き続き調べてみます。
- notnot
- ベストアンサー率47% (4900/10359)
無理です。 JavaScriptでクリップボードをいじれたら、セキュリティホールです。 クリップボードをいじりたいならブラウザのプラグインなどで実現するしかない。 他の方法としては、prompt() で、表示してユーザに自分でコピーしてもらう。 prompt("コピーしてください",text);
お礼
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>
お礼
yyr446さん、何からなにまで本当にありがとうございます。 > target.select();とすると一応選択状態の表示になります。 おお、できました、できました。 これだけでも、達成感十分でしたが、 > if(confirm("クリップボードにコピーしました。\nペーストし終わりましたか?")==true){ ここまでできればもっといいですね。 > にしてみましたが、やはりformじゃないので選択状態表示の解除は出来ませんね。 いわれなかったら気にしなかったと思いますが、 ご指摘いただくと確かにきになります(^_^; でも十分満足なものになりました。ありがとうございました。