1ページにコピーするボタンを数個つけたい

このQ&Aのポイント
  • JavaScriptを使用して、1ページに複数のテキストフォームとコピーするボタンを追加したいです。どの部分を変更すれば良いのか分かりません。
  • 解決方法を教えていただけると助かります。
  • また、コピーするボタンを押すと、テキストエリアの内容がクリップボードにコピーされます。
回答を見る
  • ベストアンサー

1ページにコピーするボタンを数個つけたい

JavaScript~サンプル置き場というサイトからコピーしたのですが、 1ページに5~6個テキストフォームとコピーするのボタンをつけたいのですが、どこを変えたらよいかわかりません??? 解る方がいたらよろしくお願いします。 <SCRIPT LANGUAGE="JavaScript"> <!-- var CYA=1 function HantenC(InTA) { var nobTP=eval("document."+InTA) nobTP.focus() nobTP.select() if (document.all&&CYA==1){ therange=nobTP.createTextRange() therange.execCommand("Copy") window.status="Contents highlighted and copied to clipboard!" setTimeout("window.status=''",1800) }} //--> </SCRIPT> <DIV ALIGN=CENTER><FONT SIZE=6><B>コピーをする</B><FONT> <HR SIZE=3 WIDTH=80% COLOR="#0000ff"><BR> <FORM name=test> <INPUT onclick="javascript:HantenC('test.select1')" type=button value=ソースコピー> <BR><BR> <TEXTAREA name=select1 rows=5 cols=45>Copyボタンを押すとTextareaの中身がコピーされます</TEXTAREA> <BR><BR> </DIV>

質問者が選んだベストアンサー

  • ベストアンサー
回答No.1

まずソースの添削から始めます。 1.FONTを閉じていない。 2.FORMを閉じていない。 次にscriptの方の添削 var CYA=1; function HantenC(InTA) { var nobTP=eval("document."+InTA); nobTP.focus(); nobTP.select(); if (document.all&&CYA==1){ therange=nobTP.createTextRange(); therange.execCommand("Copy"); window.status="Contents highlighted and copied to clipboard!"; setTimeout("window.status=''",1800); }} です。セミコロン「;」が抜けてるので修正してください。 では本題。 コピーするボタンは <INPUT onclick="javascript:HantenC('test.select1')" type="button" value="ソースコピー(select1)"> <INPUT onclick="javascript:HantenC('test.select2')" type="button" value="ソースコピー(select2)"> というふうに増やす。 でtextareaの方は <TEXTAREA name="select1" rows="5" cols="45">Copyボタンを押すとTextareaの中身がコピーされます(1)</TEXTAREA> <TEXTAREA name="select2" rows="5" cols="45">Copyボタンを押すとTextareaの中身がコピーされます(2)</TEXTAREA> というふうに増やす。 textareaのnameとinputのjavascript:HantenC('フォーム名.テキストエリア名')が対応しているので注意。 で、もともとこのスクリプトは動作するんですよね? 動作すること前提で話を進めていますが。

ysksbt
質問者

お礼

動作前提の質問でした。 解りやすい回答で短時間で解決できました。 ありがとうございました。

関連するQ&A

  • 別サイトのinnerHTMLをコピーしたい

    こんにちは。 別サイトのinnerHTMLをコピーしたいのですが、アクセス拒否されます。 何か良い方法はありませんか? そもそもできないのでしょうか?? どなたかご存じの方がいましたらご教授願います。 ☆親フレームHTML ・・・ <frame name="copy" src="copy.html"> <frame name="site" src="http://www.・・・"> ・・・ ☆copy.html ・・・ <head> <script language="JavaScript"> function innerCopy() { window.clipboardData.setData("Text",window.parent.site.document.getElementsByTagName("HTML")[0].innerHTML); } </script> </head> <BUTTON type="button" onclick="innerCopy();">HTMLソースコピー</BUTTON><BR><BR> ・・・

  • JSで子ページから親ページのラジオボタンのチェック

    JS初心者です。 サブページのボタンを押して、親ページのラジオボタンにチェックを入れたいのですが... セレクトボタンでは何とかなったのですが、どうしてもラジオボタンで対応したいのです。 どうかご教授お願いいたします。 親画面 <script type="text/javascript"> <!-- function bodyOpn(value){ window.open("size.html"); url=value; } var url; //--> </script> <body> <form method="post" name="myForm" onSubmit="return check()" target="_top"> <span id="selection01" title="bodystyle" onmouseout="spanOff()"> スタイル<sup>*</sup><a href="javascript:bodyOpn('selection01')">サイズ表</a><br> <label title="slim"> <input type="radio" name="selection01" onchange="changeBody(this)" value="slim" /> SLIM(スリム)</label><br /> <label title="reguler"> <input type="radio" name="selection01" onchange="changeBody(this)" value="reguler" /> REGULER(標準)</label><br /> </span> </form> </body> サブ画面(size.html) <script language="javascript"> <!-- function btn(n) { var bodyNo = n var btnImage = document.getElementById(bodyNo).innerHTML; window.opener.document.myForm.option01.selectedIndex=n; window.close(); } //--> </script> <body> <a href="javascript:body('1')" id="1">スリム</a> <a href="javascript:body('2')" id="2">レギュラー</a> </body>

  • 「Google+1ボタン」を設置したい

    「Google+1ボタン」を設置したいと思い、こちらのサイトを見ながら取り組んでいます。 https://developers.google.com/+/web/+1button/?hl=ja 取得するコードは次のようになっているのですが、これについて質問させてください。 <!-- +1 ボタン を表示したい位置に次のタグを貼り付けてください。 --> <div class="g-plusone" data-size="medium"></div> <!-- 最後の +1 ボタン タグの後に次のタグを貼り付けてください。 --> <script type="text/javascript"> window.___gcfg = {lang: 'ja'}; (function() { var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true; po.src = 'https://apis.google.com/js/platform.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s); })(); </script> このコードについてですが、 <!-- 最後の +1 ボタン タグの後に次のタグを貼り付けてください。 --> とありますが、 「最後の +1 ボタン タグの後」とは <div class="g-plusone" data-size="medium"></div> のことでしょうか? もしそうだとすると、これらを続けて貼り付けるということで次のようになりますね。 <div class="g-plusone" data-size="medium"></div> <script type="text/javascript"> window.___gcfg = {lang: 'ja'}; (function() { var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true; po.src = 'https://apis.google.com/js/platform.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s); })(); </script> もし違っていたら指摘してください。 よろしくお願いします。

    • ベストアンサー
    • PHP
  • 1ページ内で複数のwindow.onload = functionの動作

    Ajaxを使用して取得してきたRSSをinnerHTMLで表示するスクリプトを1ページ内に複数設置したいのですが、うまくいきません。 prototype.jsを使うと複数のonloadを制御できるという記事を参考にしたのですが、動作しませんでした。(WindowsIE6で検証してます) http://hori-uchi.com/archives/2005_09.html BODY以下のソースはこちらです。現状だとどちらか一つだけなら動作する感じです。これをどちらも動作する方法をご教授いただけませんでしょうか。宜しくお願いします。 //RSS取得1箇所目 <div id="p1">roading1</div><script> window.onload = function(){ var u = document.getElementsByTagName("head")[0].appendChild(document.createElement("script")); u.type = "text/javascript"; u.charset = "utf-8"; u.src = "http://###"; } var xml = {}; xml.onload = function(data){ var items1 = data.items; var g = "\n"; for(var i = 0; i < Math.min(items1.length, 20); i++){ // } document.getElementById("p1").innerHTML = g; } </script> //RSS取得2箇所目 <div id="p2">roading2</div><script> window.onload = function(){ var u = document.getElementsByTagName("head")[0].appendChild(document.createElement("script")); u.type = "text/javascript"; u.charset = "utf-8"; u.src = "http://***"; } var xml = {}; xml.onload = function(data){ var items2 = data.Result; var h = "\n"; for(var i = 0; i < Math.min(items2.length, 20); i++){ // } document.getElementById("p2").innerHTML = h; } </script>

  • セレクトメニューに応じたdivタグの内容

    javascriptの質問です。フォーム内のセレクトメニューに応じて表示する配列を選び、複数のdivタグ内に表示したいと思っています。getElementByIdでセレクトメニューにIdをつけて呼び出し、selectedIndexでfunction()をonloadという事ですすめています。 複数のdivタグ内に書き出すのにinnerHTMLを使うんだなというところまでは理解しているつもりですが、上手く動きませんので、どなたかご存知の方にご教授願えればと思います。 <html> <head> <script type="text/javascript"> window.onLoad = function(){ document.getElementById("selected").onChange = function(){ var planTitle = this.selectedIndex; var object = document.getElementById("derection"); var TextData = [[],["text","text"],["text","text"]]; for (var i=0; i<TextData[planTitle].length; i++){ document.write(TextData[i]); } } } </script> </head> <body> <form action=""> <select id="selected"> <option value="title01">title01</option> <option value="title02">title02</option> <option value="title03">title03</option> </select> <div id="direction"></div> <div id="direction"></div> </form> </body> </html>

  • DIVの高さをかっこよく変える方法

    皆さん、教えてください ボタンを押すとDIVの高さを、動的に大きくするjavascriptを構築しています ですが初めにサイズを指定しないで、なおかつDIVを表示しないページなので、 どうしても初めにDIVを一瞬でも表示しなければなりません それを解決させる方法はありますでしょうか 皆さんのお知恵をお貸しください ソースコード <html> <head> <meta http-equiv="Content-Script-Type" content="text/javascript"> <title>高さを変えるサンプル</title> <script TYPE="text/javascript"> <!-- var max = 0; var hmove = 0; function init(){ max = document.all("height1").offsetHeight document.all("height1").style.display = "none"; } function Height(){ document.all("height1").style.display = "block"; htime = setTimeout("Height()", 30); document.getElementById("height1").style.height = hmove * 3 + "px"; hmove++; if((hmove * 3) >= max){ hmove = 0; clearTimeout(htime); } } //--> </script> </head> <body onload="init()"> <a href='javascript:onClick=Height();'>ここ</A> <div id="height1" style="background:red;overflow:hidden;"> 1<br> 2<br> 3<br> 4<br> 5<br> 6<br> 7<br> 8<br> 9<br> 10<br> </div> </body> </html>

  • 親ウィンドウのボタンからサブウィンドウを閉じたいのですが・・・。

    いつもお世話になっています。 JavaScript初心者です。 window.closeについて質問させて下さい。 メインウィンドウにある「next」という次のページに移るボタンをクリックすると、開かれているサブウィンドウを閉じる処理を実行したいのですが、window.closeを使えばいいということしか分からず、何をどこに書けば良いのか困っています。(サブウィンドウにも「閉じる」ボタンを作成していますが、親ウィンドウからも操作が出来るようにしたいと思っています。) どうか教えていただけませんでしょうか。 ソースは次の通りです。 ----------------------------- //サブウィンドウの表示 <script language="JavaScript"> function sub(msg){ var page =window.open("", "HintPage","screenX=400,screenY=600,left=400,top=600,width=400,height=250,scrollbars=yes,resizable=yes"); page.document.open(); page.document.writeln("<html>"); page.document.writeln("<head><title>{test}</title></head>"); page.document.writeln("<body leftmargin=\"15\" rightmargin=\"15\" topmargin=\"20\">"); page.document.writeln("<h3>[ {test} ]</h3><hr><br>" + msg + "<br><br><hr><br>"); page.document.writeln("<div align=center>"); page.document.writeln("<input type=button value=close onclick=\"javascript:window.close()\"></div>"); page.document.writeln("</body>"); page.document.writeln("</html>\n"); page.document.close(); page.focus(); } </script> </HEAD> //「next」ボタンの表示 <body> <table cellpadding=3 cellspacing=5 align="right"> <tr> <td bgcolor="#9999ff" align="right"><input type="submit" name="next" value="{nextBtn}" style="width: 140px; height: 20.5px;" onClick="setPname('{next}')" {disabled2}></td></tr> </table> </body> ---------------------------- どうぞよろしくお願い致します。 説明不足の点がありましたら補足させて頂きます。

  • googleスライドのhtmlについて

    <!DOCTYPE html> <html> <head> <title>Copy Text to Clipboard</title> </head> <body> <textarea id="myTextarea" rows="4" cols="50">chrome-extension://gndmhdcefbhlchkhipcnnbkcmicncehk/manifest.json</textarea> <br> <button onclick="copyToClipboard()">コピー</button> <script> function copyToClipboard() { var text = document.getElementById("myTextarea").value; navigator.clipboard.writeText(text); } </script> </body> </html> みたいなhtmlを書いたのですが、何故かうまくいきません 多分半分くらい間違ってるんでどうしたらいいのか教えて下さい!! ちなみに私がしたいのは"コピーする"ボタンをおしたらコピーできるみたいな感じのやつです

  • textareaで入力した文字を改行したままで表示したいのですが。

    textareaに複数行で入力した文字を改行したままで表示したいのですが 改行されずに表示されます。 改行したままで表示するのはどうすればいいでしょうか? <HTML> <HEAD> <STYLE type="text/css"> <!-- INPUT {font-size: 12px;} --> </STYLE> <SCRIPT language="JavaScript"> <!-- function check(){ var strName; strName = document.nform.textN.value; var test = document.getElementById("test"); test.innerHTML = strName; } //--> </SCRIPT> </HEAD> <BODY> <FORM name="nform" > <textarea cols="30" rows="10" name="textN"></textarea> <input type="button" value=" 確認 " onClick="check()"> </FORM> <DIV id="test" style="position:absolute;font-size:24px;"> </DIV> </BODY> </HTML>

    • ベストアンサー
    • HTML
  • 数によってボタンを有効化したい

    先日もこちらでお世話になりました。 例えばアメ玉の販売をするのにA,B,C,3種類があり、合計数がDと同じにならないと実行ボタンが押せないようにしたいのですが、うまくいきません。 <head> <SCRIPT TYPE="text/javascript"> <!-- function check(obj){ var f=obj.form; var valA=parseInt(f.A.value); var valB=parseInt(f.B.value); var valC=parseInt(f.C.value); var valD=parseInt(f.D.value); if (valA+valB+valC > valD || valA+valB > valD || valB+valC > valD || valA+valC > valD){ alert('A,B,Cの和は100以下に設定ください') if(obj.type=="select-one") obj.selectedIndex=0; else if(obj.type=="text") obj.value=0; obj.focus(); } } //--> </SCRIPT> <SCRIPT LANGUAGE="JavaScript"> <!-- function radio(valD){ if (valD.value == valA+valB+valC || valA+valB || valB+valC || valA+valC ) valD.form.submit.disabled = false; else valD.form.submit.disabled = true; } //--> </SCRIPT> </head> <body bgcolor=#ffffff> <form name="" method="post" action="shop.cgi"> <b>☆飴玉 </b> <br> <b>個数配分</b><br> A:<select name="A" onChange="check(this)" onChange="radio(this)"> <option value = '選択してください' selected>選択してください</option> <script language="javascript"> for ( var i = 0; i < 51; i++ ){ var sDat = ( "00" + i ).match( /..$/ ); document.write( "<option value = '" + sDat + ")'>" + sDat + "</option>\n" ); } </script> </select><br> B:<select name="B" onChange="check(this)" onChange="radio(this)"> <option value = '選択してください' selected>選択してください</option> <script language="javascript"> for ( var i = 0; i < 51; i++ ){ var sDat = ( "00" + i ).match( /..$/ ); document.write( "<option value = '" + sDat + ")'>" + sDat + "</option>\n" ); } </script> </select><br> C:<select name="C" onChange="check(this)" onChange="radio(this)"> <option value = '選択してください' selected>選択してください</option> <script language="javascript"> for ( var i = 0; i < 51; i++ ){ var sDat = ( "00" + i ).match( /..$/ ); document.write( "<option value = '" + sDat + ")'>" + sDat + "</option>\n" ); } </script> </select><br> D:<input type="text" name="D" readonly value="50" class="num"></br> <input type="submit" value="申し込む" name="submit" disabled> </form> </body> 詳しくわからないのですが、イベントハンドラは2つ続けて書けないのでしょうか。。。 どなたかお教え頂けたら幸いです。

専門家に質問してみよう