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

解決済

質問者：sadacha
質問日時：2008/01/16 11:48
回答数：2件

こんにちは。以下、ご回答いただければ幸いです。
日頃、PHPカテゴリにてお世話になっておりますが、以下のようなものを作りたいと考えているのですが、その流れ（仕組）が分からず、
http://oshiete1.goo.ne.jp/qa2749334.html
にて同じような質問があったので、今回javascriptにて投函させていただきました。宜しくお願いいたします。

上記、URLと同じなのですが、流れのイメージとして、テキストエリアに文字を入力している際、入力途中でテキストエリア外に設置のボタン（アイコンなど）を押したとき、その押したボタンに埋め込んである？記号などを、テキストエリアでの入力途中に引き継いで記号文字列を代入したいと考えています。
適切な説明が上手く出来ないのですが、例えば、テキストエリアにおいて、

こんにちは

と入力したとき、テキストエリア外に設置のボタンを押すことで、

こんにちは[a:1]

と、このようにしたいのです。
色々なイメージを描いておりますが、テキストエリア内にカーソルがあるとき、一旦テキストエリアの外のボタンを押して、また元のカーソルの位置に戻すには？とか、ボタン（アイコン）に設定の記号文字列を代入するには？と、一向に具体的なイメージがつかめずにいる次第です。
お忙しい中恐縮ですが、ご指導頂戴出来れば幸いです。宜しくお願いいたします。

通報する

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

質問の本文を隠す

回答 (2件)

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

No.1ベストアンサー

回答者： tuki_yuki
回答日時：2008/01/16 13:57

親ページにはテキストエリアと小ウィンドウを開くボタンがある

親ページにあったボタンを押すと絵文字一覧が開かれる
その絵文字画像をクリックすると親ページのテキストエリアに挿入される
なお、挿入される場所は現在のカーソル位置であること

こんな感じでしょうか？
大分昔に作ったソースがあるので、参考程度にどうぞ

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形式の画像を用意してください。

- 0
- 件

通報する

この回答へのお礼

tuki_yuki様

はじめまして、こんにちは。
貴重なソースまでご提示いただき、ありがとう御座います。

>こんな感じでしょうか？

はい！全くその通りでソースを実行させて頂いたときには感動さえしました。これまで全くといって良いほど、その流れのイメージが付かなかったもので・・。

すぐに完成という状況ではないため、これから途中躓くかもしれませんが、随分と開けたような感覚です。有難う御座いました。

通報する

お礼日時：2008/01/16 16:55

No.2

回答者： wp_
回答日時：2008/01/16 14:40

>具体的なイメージがつかめずにいる次第です。

まずロジックを熟考すべきかと。
この場合ですと
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というのもあるようなので
そちらも参照すると良いでしょう。