テキストエリア内の文字列にリンクを付けるには？

前へ 次へ
このQ&Aのポイント
  • Perl初心者はテキストエリア内の文字列にリンクを付ける方法を知りたいです。
  • テキストエリア内に変数の中身を表示させる際に、リンクを正しく表示することができない問題が発生しています。
  • HTMLのフォーム要素であるテキストエリアにリンクを含めた文字列を表示する方法を教えてください。
回答を見る
  • ベストアンサー

テキストエリア内の文字列にリンクを付けるには？

Perl 初心者です。よろしくお願いします。以下のように変数$wwwstr を作って表示させたいのですが、<body>にはリンク表示できても、Textarea ないには変数の中身が表示されてしまいます。 原因が分かりません。Style のせい？Form の部品のせい？ よろしく御教示下さい。 #!/usr/local/bin/perl $wwwstr = 'http://www.germanft.com/DETAIL.html'; $disp_data= '<a href=' . $wwwstr . '>' . '(WWW)' . '</a>'; ##### 表示部　############## print <<EOD; Content-type: text/html; charset=sjis-jp; <HTML> <HEAD> <META http-equiv="Content-Style-Type" content="text/css"> <TITLE></TITLE> </HEAD> <BODY bgcolor="#fcf2d8"> $disp_data <FORM method="POST" action="EditDic.cgi" name="kdicFORM"> <TEXTAREA rows="12" cols="40" name="dicdata"; style="background-color:#EBF2DF; padding:8px; font-size:12pt; font-weight:bolder; line-height:16pt; border:5px double #008040; font-family: 'ＭＳ Ｐ明朝',serif">$disp_data</TEXTAREA> </FORM> </BODY> </HTML> EOD __END__

  • Perl
  • 回答数2
  • ありがとう数3

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

  • ベストアンサー
noname#227796
noname#227796
回答No.2

>では何かうまい手を使って、テキストエリア内の任意の文字列にリンクを張ることはできませんでしょうか？ HTMLの仕様に反しているはずなので、やりたいのであれば、ブラウザを改良（改造?）しない限り無理でしょう。 テキストエリアの内容を変更して送信したいとかとなると無理ですが、テキストエリアを使用せずに、似たように表示したいだけなら、インラインフレームを使えばなんとかなりますが。 方法としては、 (1) インラインフレームを使う まず、$disp_dataを出力するCGIを別途作る 出力は、 <HTML> <HEAD> <META http-equiv="Content-Type" content="text/html; charset=shift_jis"> </HEAD> <BODY> $disp_data </BODY> </HTML> 程度で良いでしょう。 これでリンク部分ができあがり。 ここでは、適当に link.cgi とでもしておきます。 次に、元々のCGIの方でインラインフレームを使用するようにします。 <FORM>～</FORM>の部分を<IFRAME>～</IFRAME>に変更。 <IFRAME src="link.cgi" height=300 width=300> IFRAME対応のブラウザでないと見れません。 </IFRAME> こんな感じで、srcに先のlink.cgiを指定します。 見た目は、テキストエリアに近いと思いますが、IFRAMEを使えないブラウザもあるので注意が必要です。 どちらかというと、こちらの方が素直なやり方でしょう。 ※クリックされたときに、フォームで何か送信したいのだとしたら、内容をHIDDENでセットしておき、アンカータグにonclickイベントを設けて、フォームをsubmitさせれば良いでしょう。 (2) テキストエリアをクリックしたら・・・ テキストエリアでトリッキーなことをします。 <TEXTAREA onclick="window.open('$wwwstr','new','');" style="text-decoration:underline;">(WWW)</TEXTAREA> フォント色は帰られないと思いますが、下線を引いてリンクっぽく見せる。 テキストエリアがクリックされたら、リンク先に飛ばす。 window.openでなく、location.hrefでも良いですが。 まあ、こんなサイトがあったら、私は二度と見に行かないような気がしますが(笑)

tonka729
質問者

お礼

I am alive 様、お礼が遅れてしまい、申し訳ありません。（１）の方法でまず途中までできました。途中まで、ともうしますのは、先回、（１）のうしろに書き添えて下さった； ※クリックされたときに、フォームで何か送信したいのだとしたら、内容をHIDDENでセットしておき、アンカータグにonclickイベントを設けて、フォームをsubmitさせれば良いでしょう。 --これが初心者の私にできたらすごい！と予感させてはくれるのですが、力不足でプログラムができません。<FORM action="zzz.cgi" name=ancherFORM><INPUT type=HIDDEN...</FORM> と<A href=xx onclick=submit() >文字列</A> などとまだ頭の中で考えているうちどんどん日数が経ってしまい、ご返事するのが遅れあわてております。 どうも<FORM..>以下いまいち見通しが立ちません。アドバイスをいただければ幸いです。

その他の回答 (1)

noname#227796
noname#227796
回答No.1

<TEXTAREA>～</TEXTARE>で囲まれたテキストは、そのまま表示されます。 Perlではなく、普通にHTMLで書いてみればわかります。 <TEXTAREA><a href="URL">(WWW)<a></TEXTAREA> ↑これだと、テキストエリアの中に、 <a href="URL">(WWW)<a> と表示されるはず。 テキストエリアの中でリンクは張れません。 http://tohoho.wakusei.ne.jp/html/textarea.htm

参考URL：
http://tohoho.wakusei.ne.jp/html/textarea.htm
tonka729
質問者

お礼

ありがとうございました。では何かうまい手を使って、テキストエリア内の任意の文字列にリンクを張ることはできませんでしょうか？アイディアが浮かびません。お知恵を拝借できれば有り難いのですが。。。

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. Perl

関連するQ&A

  • テキストエリアの作成法

    　下記のような横一列に並んだ３つのテキストエリアを作成しました。Mozilla Firefoxではほぼ期待通り表示されましたが、インターネット・エクスプローラーでは全く表示されません。後者でも表示させるにはどうしたらよいでしょうか。 またテキストエリア内の文章に改行をつけるにはどうしたらよいでしょうか。 <form><p class=MsoNormal><span><TEXTAREA ROWS="13" COLS="70" NAME="textarea1"id=textarea1 style="HEIGHT: 540px; WIDTH: 300px; font-size: 9pt" readonly>　『テキスト』　</TEXTAREA> &nbsp;<TEXTAREA ROWS="13" COLS="70" NAME="textarea1"id=textarea1 style="HEIGHT: 540px; WIDTH: 300px; font-size: 9pt" readonly>　『テキスト』　</TEXTAREA> &nbsp;<TEXTAREA ROWS="13" COLS="70" NAME="textarea1"id=textarea1 style="HEIGHT: 540px; WIDTH: 300px; font-size: 9pt" readonly>　『テキスト』　</TEXTAREA></span></p></form>

  • Javascriptで複数のテキストエリアの文字列を連結させたいです

    Javascriptで複数のテキストエリアの文字列を連結させたいです。 初めまして、 お世話になります。 ------------------------------------------------- <html> <head> <title>無題ドキュメント</title> <meta http-equiv="Content-Type" content="text/html; charset=EUC-JP"> </head> <body bgcolor="#FFFFFF" text="#000000"> <form name="form1" method="post" action=""> いつ<br> <textarea name="when"></textarea> <br> <br> どこで<br> <textarea name="where"></textarea> <br> <br> だれが<br> <textarea name="who"></textarea> <br> <br> どうした<br> <textarea name="what"></textarea> <br> <input type="submit" name="submit" value="連結"> <input type="reset" name="submit" value="リセット"> <br> <br> いつどこでだれががどうした。<br> <textarea name="textfield"></textarea> </form> </body> </html> ------------------------------------------------- というHTMLがあったとして ボタンを押したら文字列を連結させたいのです。 その際、入力したテキストフィールドで文字列が改行をされてあった場合 それをそのまま反映して表示させたいのです。 ぜひよろしくお願いします。

  • テキストエリアの設定

    質問１ 以下のように設定しました。現在、横長のボックスの右下に４cm×４cm大の送信用テキストエリアが配置されていますが、両者を横一列に並べることはできるでしょうか。テキストエリアを横長ボックスの前に配置してもかまいません。 <html> <head> <title>MISC</title></head> <body bgcolor="#FFFF99"> <div align=center class="MsoNormal">－－－省略－－－－</div> <div style="background-color:#0ff;width:730px;height:200px;overflow:auto;"> <FONT STYLE="font-size:8mm"COLOR="#808000" SIZE="8&quot;>見出し</FONT> <h3><FONT COLOR="#0000ff&quot;>小見出し</FONT></h3> <FONT STYLE="font-size:5mm">テキスト</FONT></DIV> <form method="POST" action="mailto:***@*****"><textarea style="width:200px;height:200px;background-image:url(TX_11_11.JPG);">ご意見</textarea> <input type=submit value="送信"></form> 質問２ あるいは以下の設定で、テキストエリア右側の空白部分にも見出し、小見出し、テキストを配置することができるでしょうか。 <div style="background-color:#0ff;width:950px;height:200px;overflow:auto;"> <form method="POST" action="mailto:***@*****"><textarea style="width:200px;height:200px;background-image:url(TX_11_11.JPG);">ご意見</textarea> <input type=submit value="送信"></form> <FONT STYLE="font-size:8mm"COLOR="#808000" SIZE="8&quot;>見出し</FONT> <h3><FONT COLOR="#0000ff&quot;>小見出し</FONT></h3> <FONT STYLE="font-size:5mm"SIZE="5">テキスト</FONT></DIV>

  • テキストエリアに履歴を残したい

    以下のスクリプトではテキストエリアにボタンを押した時刻が、その都度表示されるだけです。複数回ボタンを押したときに履歴が残るようにしたいのですが難しいでしょうか？ <html> <head> <title>履歴</title> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <script type="text/javascript"><!-- myDate = new Date(); Y = myDate.getFullYear(); M = myDate.getMonth() + 1; D = myDate.getDate(); myTime = new Date(); H = myTime.getHours(); m = myTime.getMinutes(); S = myTime.getSeconds(); L = Y + "年" + M + "月" + D + "日" + H + "時" + m +"分" + S + "秒\n" function myFunc(){ myDate = new Date(); Y = myDate.getFullYear(); M = myDate.getMonth() + 1; D = myDate.getDate(); myTime = new Date(); H = myTime.getHours(); m = myTime.getMinutes(); S = myTime.getSeconds(); Log = Y + "年" + M + "月" + D + "日" + H + "時" + m +"分" + S + "秒\n" document.myForm.Log.value = Log; } //--> </script> </head> <BODY> <CENTER> ボタンを押すと履歴が表示されます。 <form name="myForm"> <input type="button" value="PUSH" onClick="myFunc()" STYLE="font-size: 16pt;"> <P> <textarea name="Log" cols="50" rows="15" STYLE="font-size: 16pt;"> PUSH履歴が表示されます。 </textarea> </form> </CENTER> </body> </html> 宜しくお願いします。

  • テキストエリア文字制限について

    テキストエリア文字制限について 失礼します。 javascript初心者です。 複数のテキストエリアの文字制限を行いたく 苦戦しております。 いろいろと検索してみましたが・・・ 2日ほど悩んでおります。 AとBでエラーが出た場合はCGIに流れず入力フォームに戻るのですが Bでエラーが発生しない場合CGIに流れてしまいます。 ですの文字数制限をしても結局CGIに流れてしまうのですが どのように記述すればよろしいでしょうか？？ なんとか・・・ご教授いただければ幸いです。 よろしくお願いいたします。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <title>入力文字数の制限</title> <script language="javascript" type="text/javascript"> <!-- var MAXLENGTH = 10; //入力許容最大文字数 function tareachk(frm){ var tmp = frm.vin1.value; var len = tmp.length; if(len > MAXLENGTH){alert("A入力可能な文字数は"+MAXLENGTH+"文字までです");} var tmp = frm.vin2.value; var len = tmp.length; if(len > MAXLENGTH){alert("B入力可能な文字数は"+MAXLENGTH+"文字までです");} else{frm.submit();} } // --> </script> </head> <body> <form action="ccccc.cgi" method="post"> <textarea name="vin1" rows="5" cols="30">10文字まで入力可能</textarea><br> <textarea name="vin2" rows="5" cols="30">10文字まで入力可能</textarea><br> <input type="button" value="GO" onclick="tareachk(this.form);"> </form> </body> </html>

  • 掲示板の発言テーブルの文字スタイル

    掲示板をレンタルし、それをカスタマイズしています。 発言テーブルの文字を変えたいのですが、 スタイルシートでTEXTAREAを指定しているのですが、 変わってくれません。 投稿前の書き込みテーブルではちゃんと反映してくれてるのですが、 投稿後では反映されていないのです。 ちなみにこんな感じなのですが…↓ <STYLE type="text/css"><!-- body,table,TEXTAREA { font-size:11pt; font-color:black; line-height:15pt ;} a { text-decoration: none ;} --></STYLE> 投稿後の部分はTEXTAREAとはまた別なのでしょうか？ どなたか教えて下さい。 宜しくお願い致します。

  • 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
  • ボタンを押すと、テキストエリアに文字が出て、さらにそれを

    アレンジしたいのです。 <FORM> <INPUT type="text" value="テスト" name="b1" size="55"> <br> <font style="font-size:15px" color="#666666">ボタンをクリック！</font> <INPUT type="button" value="ボタン" onclick="b1.value='こうゆうふうに字が出る'"> </FORM> 上記のようにして「ボタン押す=文字出る」を作りました。 さらには、１文字づつもったいぶって、文字を出したいのです。 別の、タグで「勝手に１文字づつ出る」のは、あったと思いますが、ボタンで、動作開始をしたいと思います。 何か、よいアイデアはありますでしょうか？

  • テキストボックスが、縦長になる

    このokwaveの質問テキストボックスのようなテキストボックスを作りたいです。 パソコンだけの利用です。スマホ対応は不要です。以下のようなcgiを書きました。 textarea{　のwidtを増やしたり、col=を増やしたりしていますが、横幅が狭いままで、縦長のテキストボックスになります。 どうすればよろしいでしょうか？ <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <style type="text/css"> textarea { width 1000ptx; height 40em; } </style> </head> <form action="insert_data.cgi" method="post"> <input type="hidden" name="mode" value="display_data"> Data text<br> <textarea name="data_text" value="" col="1000" rows="50"></textarea> <input type="submit" value="SUBMIT" style="font-size:x-large;" /> </form>

    • ベストアンサー
    • CGI
  • textareaに文字列を追加する方法

    JavaScript超初心者です。初めて質問します。 2つのテキストエリアに入力されたものを、3つ目のテキストエリアに文字を追加して、入力するスクリプトを作ろうとしています。 ネットで似たようなものを見つけてきて、アレンジしてみたのですが、2つ目の文字を入力するためのボタンをクリックすると、1つ目の文字が消えてしまいます。 姓：AAA/名：BBB と続けて追加されるようにするには、どうしたらよいのでしょうか？ どなたかお助けください。よろしくお願いいたします。 ＜作成中のページ＞ <html> <head> <META http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <META http-equiv="Content-Style-Type" content="text/css"> <title></title> <script language="JavaScript"><!-- function setData() { txt1= document.form7.t1.value; document.form7.list.value = "姓："+ txt1; } function setData1() { txt2= document.form7.t2.value; document.form7.list.value = "名："+ txt2; } // --></script> </head> <body> <form name="form7"> 姓<TEXTAREA name="t1" size="10" rows="1"></TEXTAREA><input type="button" value="済" onClick=setData()><br> 名<TEXTAREA name="t2" size="10" rows="1"></TEXTAREA><input type="button" value="済" onClick=setData1()><br> <textarea rows="9" cols="20" name="list"></textarea><br> </form> </body> </html>

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する