W i S T E R I A

B O A R D
 
●新規 ●トレリス表示 ●一覧表示 ●ログ検索 ●ヘルプ ●ホームへ
●関連記事の一覧

56
ヤフーメールのような・・・ by tasu 2004/02/13 (Fri) 14:25
△up
res/edit
 
ヤフーメールのようなHTML挿入(太字ボタンをクリックすればフォーム部分に反映)できるようなスクリプトを探しています。ソースを見てもさっぱりわからず初心者にカスタマイズしやすいものってないでしょうか?
57
Re1:ヤフーメールのような・・・ by ごだっち 2004/02/14 (Sat) 08:59
△up
res/edit
admin
 
え〜っと、要点は「ボタンクリックでフォームに反映」される機能を実現するスクリプト」だよね?

であれば、フォーム名を「frm0」( <form name="frm0" )、入力テキスト部分を「txt0」( <input type="text" name="txt0" )、としたときに、ボタンの側は
<input type="button" onclick="document.frm0.txt0.value=this.value" value="ほげ">
とか、こんな感じで良いと思う。

サンプルとしては、こんなの。
<form name="frm0">
<input type="text" name="txt0" value=""><br>
<input type="button" onclick="document.frm0.txt0.value=this.value" value="ほげっ!"><br>
<input type="button" onclick="document.frm0.txt0.value=this.value" value="あたたたっ"><br>
<input type="button" onclick="document.frm0.txt0.value=this.value" value="ひでぶっ!"><br>
</form>

ここでは、onclickイベントを使うことで「ボタンを押したら」動作するように設定している。

そして、ボタンが押されたら、
document(ページの)
.frm0(フォーム名が frm0 のフォーム設定の中にある)
.txt0( txt0 という名前の入力フォームの)
.value(そのフォームの値を)
=(式の右側で示される内容に変更しなさい)
this(この「クリックされたボタンの」)
.value(値として設定されている内容、つまり「ほげ」とか「あたた」)
という処理が実行される。

もし、ボタンの value(つまりは、ボタンの表示)とは違う内容を入力させたいときは、上の式の「this.value」の部分を書き換えてあげれば良い。
例えば
=this.value って書かれている部分を
='hoge' とか
='atatata' とか、
='おまえはすでに(以下略)' とか。

このとき注意することは、onclick="処理内容"として、ダブルクォーテーション(")で囲まれた中、さらにクォーテーション囲みを追加することになるので、この場合(文字列を囲むクォーテーション)には「シングルクォーテーション(')」を使うこと。

具体的には
<input type="button" onclick="document.frm0.txt0.value='おまえはすでに(以下略)'" value="あたたたっ!">
というカタチ。

・・・こんな回答で参考になったかな?
60
Re2:ヤフーメールのような・・・ by tasu 2004/02/16 (Mon) 14:40
△up
res/edit
 
ごていねいな返信ありがとうございました。
ごだっちさんのスクリプトを応用するのは
まだまだ勉強不足な私。

具体的に下のtextareaに入力した文字を選択して上のボタン(色を変更する、フォントサイズなど)をクリックすると
textareaに反映される。

この手のスクリプトを実現するのは素人には難しいっすかね?

<table width="100%" border="0" cellspacing="2" cellpadding="3">
<tr>
<td> <input name="button" type="button" onclick="document.frm0.txt0.value=this.value" value="太字">
<input name="button22" type="button" onclick="document.frm0.txt0.value=this.value" value="文字の色">
<input name="button2" type="button" onclick="document.frm0.txt0.value=this.value" value="文字を大きく">
<input name="button3" type="button" onclick="document.frm0.txt0.value=this.value" value="文字を小さく">
<input name="button32" type="button" onclick="document.frm0.txt0.value=this.value" value="リンクを貼る">
<input name="button322" type="button" onclick="document.frm0.txt0.value=this.value" value="HTMLソースを見る"></td>
</tr>
<tr>
<td><textarea name="textarea" cols="30" rows="5"></textarea></td>
</tr>
</table>
63
Re3:ヤフーメールのような・・・ by ごだっち 2004/02/16 (Mon) 22:21
△up
res/edit
admin
 
あ、了解しました。

う〜ん、テキストエリアの中の表示を、部分的にボールドにしたり色を変えたり、ですか・・・。

ちょっと難しいかもしれない。
一見テキストエリア風に見える要素を自分で定義して、その中の特定の文字列部分を取得したり、innerHTMLで表現を変えたりすることは可能かもしれないけれど、相当に難易度は高いと思う。

とりあえず、通常のテキストの中から選択(マウスドラッグで反転)された部分の文字列を取得するサンプルはあるので、良かったら見てみてくださいませ。

http://homepage2.nifty.com/godakaz/laboratory/selval.html

65
Re4:ヤフーメールのような・・・ by anonymous 2004/02/17 (Tue) 16:28
△up
res/edit
 
このソースを見てまずは勉強いたします!!
ありがございました。
ごだっちさんって管理人さんだったんですね・・・・
今気付きました。(笑)
64
Re4:ヤフーメールのような・・・ by ごだっち 2004/02/16 (Mon) 23:08
△up
res/edit
admin
 
補足ですが、以下のような情報もあります。

これはcreateTextRangeを使うことで、テキストを選択したり、選択されたテキストの表示を変えたりするサンプルが掲載されている、MSDN(マイクロソフトが提供する、開発者向けの情報サイト)のUS版のURLです。

http://msdn.microsoft.com/library/default.asp?url=/workshop/author/dyncontent/textrange.asp

如何せん英語版なので読み解くのは大変なのですが、いろいろ触って見ているだけでも面白いですよ。MSDN。
(日本語サイトもあるのですが、サンプル数が少ないし、解説されている機能の数もUS版に比べると全然足りないのです)
p.ink