ベストアンサー

テキストエリアへの記号代入

2008/01/16 11:48

こんにちは。以下、ご回答いただければ幸いです。日頃、PHPカテゴリにてお世話になっておりますが、以下のようなものを作りたいと考えているのですが、その流れ（仕組）が分からず、 http://oshiete1.goo.ne.jp/qa2749334.html にて同じような質問があったので、今回javascriptにて投函させていただきました。宜しくお願いいたします。上記、URLと同じなのですが、流れのイメージとして、テキストエリアに文字を入力している際、入力途中でテキストエリア外に設置のボタン（アイコンなど）を押したとき、その押したボタンに埋め込んである？記号などを、テキストエリアでの入力途中に引き継いで記号文字列を代入したいと考えています。適切な説明が上手く出来ないのですが、例えば、テキストエリアにおいて、こんにちはと入力したとき、テキストエリア外に設置のボタンを押すことで、こんにちは[a:1] と、このようにしたいのです。色々なイメージを描いておりますが、テキストエリア内にカーソルがあるとき、一旦テキストエリアの外のボタンを押して、また元のカーソルの位置に戻すには？とか、ボタン（アイコン）に設定の記号文字列を代入するには？と、一向に具体的なイメージがつかめずにいる次第です。お忙しい中恐縮ですが、ご指導頂戴出来れば幸いです。宜しくお願いいたします。

sadacha
お礼率92% (185/199)

JavaScript
回答数2
ありがとう数2

みんなの回答 （2）
専門家の回答

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

ベストアンサー

tuki_yuki
ベストアンサー率30% (35/114)

2008/01/16 13:57 回答No.1

親ページにはテキストエリアと小ウィンドウを開くボタンがある親ページにあったボタンを押すと絵文字一覧が開かれるその絵文字画像をクリックすると親ページのテキストエリアに挿入されるなお、挿入される場所は現在のカーソル位置であることこんな感じでしょうか？大分昔に作ったソースがあるので、参考程度にどうぞ parent.php <head> <title></title> <script language="javascript">  </script> </head> <FORM><INPUT type="button" name="btnShowChild" value="絵文字一覧" onClick="EmojiSub()"> </FORM> <FORM name="fm1"><TEXTAREA rows="20" cols="50" name="tx1"></TEXTAREA></FORM> icon.php <?php $fname = $_GET['fname']; $txname = $_GET['txname']; ?> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"> <HTML> <HEAD> <meta http-equiv="content-type" content="text/html; charset=utf-8"></meta> <TITLE>絵文字サブウィンドウ</TITLE> <script language="javascript">  </script> </HEAD> <BODY> <P align="center">挿入したい絵文字をクリックしてください</P> </P> <?php $Cnt = 0; // 絵文字配列作成(使用する画像の拡張子前の番号です。この辺は改良の余地) $array = array("1","2","3","4"……); for($i=0;$i<count($array);$i++){ $Cnt++; //横に並べる絵文字の数 if($Cnt>20){ print("<br>"); $Cnt = 1; } //ここで絵文字を実際に表示。 print("<a href=javascript:SetMsg('".$array[$i]."')><img src=pic/".$array[$i].".gif border=0></a>"); } ?> </BODY> 絵文字クリックされると[i:番号]を挿入する形式です。幾つか<html>等省略してます。これとは別に画像用のフォルダをつくり、番号.gif形式の画像を用意してください。

質問者

お礼 2008/01/16 16:55

tuki_yuki様はじめまして、こんにちは。貴重なソースまでご提示いただき、ありがとう御座います。 >こんな感じでしょうか？はい！全くその通りでソースを実行させて頂いたときには感動さえしました。これまで全くといって良いほど、その流れのイメージが付かなかったもので・・。すぐに完成という状況ではないため、これから途中躓くかもしれませんが、随分と開けたような感覚です。有難う御座いました。

ログインすると、全ての回答が全文表示されます。

その他の回答 (1)

wp_
ベストアンサー率54% (132/242)

2008/01/16 14:40 回答No.2

>具体的なイメージがつかめずにいる次第です。まずロジックを熟考すべきかと。この場合ですと 1. キャレットの位置情報取得 2. テキストエリア内に現在存在する文字列を取得 3. 2で取得した文字列の1の位置情報へ文字列を挿入 4. 3で生成した文字列をテキストエリアに突っ込む 5. フォーカスをテキストエリアへ設定するとなります。 jsを一通りこなしていれば2,3,4,5は簡単かと思います。 >2. 4. getElementById('テキストエリアID').innerHTML >3. いろいろありますが当方はsubstr()を使うのが好きです。 >5. getElementById('テキストエリアID').focus(); >設定の記号文字列を代入するには？突っ込む文字列を引数で渡すようにするのが一番楽かと思われます。で、曲者なのが1.なのですけれども、これは以下のURLが参考になるかと思います。 http://d.hatena.ne.jp/brazil/20061021/1161377936 既存のライブラリとしてSelection.jsというのもあるようなのでそちらも参照すると良いでしょう。

質問者