プロが教えるわが家の防犯対策術！

エディタ機能のTEXTAREAを作りたい

解決済

  • 質問者：takaP-
  • 質問日時：
  • 回答数：3件

プログラムのソースコードをTEXTAREAに記述してもらい、サーバに送信してコンパイルし、コンパイルエラーなどの場合にはエラー内容を返すというものを作っているのですが、エラーが出た場合のエラー行箇所を素早く見つけられるようにTEXTAREAに行番号表示機能を付加したいと考えているのですが、なかなか良いアイデアが思い浮かびません（というよりも、HTML,JavaScript等の知識に乏しいため取っ掛かりすら思い浮かばないというのが実情です・汗）
出来るならば、Enterキー押下時に新たな行番号が付加されるといった形のものにしたいのですが。。。
それと、もう１つ。
TEXTAREAにフォーカスが当たっている状態でTABキーが押された場合にフォーカスの移動ではなくてインデントになるよう変更したいのですが、これはどのように指定をすれば可能なのでしょうか？

面倒な質問ばかりで申し訳ありませんが宜しくお願い致します。

通報する

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

質問の本文を隠す

A 回答 (3件)

No.3ベストアンサー

  • 回答者： you111111
  • 回答日時：

>TEXTAREAにフォーカスが当たっている状態でTABキーが押された場合にフォーカスの移動ではなくてインデントになるよう変更したいのですが、これはどのように指定をすれば可能なのでしょうか？



こんな感じでいかがでしょう？

<html>
<head>
<script language="javascript">
<!--
function insTab()
{
if(event.keyCode==9)
{
var r = document.selection.createRange();
r.text += '\t';
setTimeout('document.f.t.focus()',0);
}
}
//-->
</script>
</head>
<body>
<form name="f">
<textarea name="t" cols="50" rows="10" onkeydown="insTab();"></textarea>
</form>
</body>
</html>
    • good
    • 0
    • 件
通報する
この回答へのお礼

大変参考になりました。ありがとうございます。

上記ソースそのままですと期待通りの動きなのですが、
なぜか私のソースに組み込むと思い通りには動かずに、
キャレットが先頭に貼り付いたままになってしまいま
した。。。（未だ原因判らず・汗

で、すったもんだしてるうちにevent.returnValue=false;
をyou11111さんソースに組み込んで使う事で何とか希望通
りの動きになってくれました。
取り敢えず成果物として載せておきます。

if(event.keyCode==9){
　　event.returnValue=false;
　　var r=document.selection.createRange();
　　r.text+='\t';
}

クロスブラウザからは程遠いですが、以後コツコツと
頑張ってみようと思います。感謝。

通報する
お礼日時：2003/09/09 10:42

No.2

  • 回答者： natsuki_tk
  • 回答日時：

>動機としては、Javaプログラム初心者の方へ向けたネット講座ページを


>/snip/
>多少のニーズはあるかも、とか考えて作り始めました。

面白そうですね(^^)
(先ほどは失礼なこと申してすみませんでした)


>エディタ用のTEXTAREAの行増減に対してリアルタイムでＮの増減が図れればなぁと

リアルタイムは難しいと思います。
ボタンを押すなどのトリガーなしにすぐに書き換えるのは難しいでしょうから
(かといって、行番号を表示するのにわざわざボタンを押すのも面倒ですし)

一つ別のアイデアとしては、
サーバ側に一端データを送ったとのHTML表示画面で、
(先ほどの行番号つきのソースの代わりに)
textarea(行番号つき)を表示させることもできます。
(全然リアルタイムではありませんが)

テーブルでレイアウト整えて、
左に番号、右にソースとすればそれなりに見やすくできると思います。


もっとも、
textareaの一行ごとは色の変更ができなかったと思います。
その点を考慮すれば、左の部分は右のソース(textarea?)部分と文字サイズは
あわせた上で、普通のテキストとして表示させた方がいいと思います。
(色をつけたり、マークをつけたりと、より細かいことができますので)

ちなみに、
リストボックス系の個々に要素を並べるタイプは
項目ごとに色を変えられたりするので意外と便利です・・
(スタイルシートを使って)

#最終的にインデント問題が一番きついかもしれませんね(^^；
    • good
    • 0
    • 件
通報する
この回答へのお礼

>(先ほどは失礼なこと申してすみませんでした)

いえいえ、お気になさらずに。

行番号に関する様々なアイデア参考にさせて頂きます。
TAB関連に時間を取られて未だ試してはいませんが（汗

あ、そうそうインデントに関して何とかなりそうな
感じです（多々問題が残りそうな予感もしますが・ｗ
＃３さんへのお礼欄にソース書いておきましたので
暇な時にでも。。。。

以後も様々な質問をすると思いますので、その時にでも
駄目だしをお願い致します。ではでは。

通報する
お礼日時：2003/09/09 10:52

No.1

  • 回答者： natsuki_tk
  • 回答日時：

プログラムのソースコードをtextarea内に記述し、


(実際にはコピーを貼り付けるのでしょうけれど)
サーバ側へ送信…CGI等(JAVAのサーブレットでしょうか)で受け取り
エラーチェックを行うということでしょうか？

行番号の件ですが、
送信ボタンを押す際にJavaScriptを起動して、
送信内容を書き換えれば可能だと思います。

ただ、受け取るサーバ側で行を追加した方が簡単なように思います。

ちなみに、サーバに送信後に、
ソースを丸ごと行番号つきでページの下にでも表示させるのが
行数の表示としては一番簡単で効果的だと思います。
(form中に行番号いれるのは見にくくなりますから)


tabの件ですが、ブラウザの仕様(設定)を変更できないと
動作を変えることはできないと思います。
IEなどでは変更できないんじゃないでしょうか・・


個人的な意見としては、
サーバまで送ってなぜ文法チェックを行うのかが多少謎です(^^；
フォームにコピーする手間や、通信の時間待ちなどを考えると、
ローカルで実現できないものにしか需要が無いような気がいたします
(余計なことまで言って申し訳ありませんm(_ _)m)
    • good
    • 0
    • 件
通報する
この回答へのお礼

回答ありがとうございます。

>受け取るサーバ側で行を追加した方が簡単なように思います。

内容の書き換え（文字列に直接行番号の追加）ではなく、別途？列×Ｎ行の行番号表示用のTEXTAREAか何かを用意し、エディタ用のTEXTAREAの行増減に対してリアルタイムでＮの増減が図れればなぁと思ったのですが、どうも無理なのかなぁと思えてきました。。。
しかし、上記のアドバイスを受け、フォーム上で実現せずとも別途、行付きソースをHTMLに変換して送信すれば要件は満たせるかもしれない事に気付きました。ありがとうございます。

>tabの件ですが、ブラウザの仕様(設定)を変更できないと
>動作を変えることはできないと思います。
>IEなどでは変更できないんじゃないでしょうか・・

うーん、結構これは痛いですね・ｗ
インデント付けるのに、一々スペースを叩くようではソースコードを記述するエディタとしは致命的ですね。。。
そうなると、Java Appletで作るしか無いのかとも思ったり。。。

>個人的な意見としては、
>サーバまで送ってなぜ文法チェックを行うのかが多少謎です(^^；

特に大きな需要を見越してとかいう話ではないんです。
動機としては、Javaプログラム初心者の方へ向けたネット講座ページを開設しようかと考えておりまして（もちろん趣味の域です）取っ掛かりとしてSDK等をダウンロードしてもらう前に実際にアプレットのソースを記述してもらい、生成したアプレットを含むHTMLページを返し動作体験してもらおうかなと思い立った次第でして。。。
で、そこまで作るんなら、アプレット以外の通常のクラスもコンパイル出来るようにして、外出先で環境構築出来ない場合の携帯コンパイラとして、とか、過去のバージョン全てのSDKを用意しておけば多少のニーズはあるかも、とか考えて作り始めました。

まぁ、一番の目的は私のサーバサイドJava学習の取っ掛かりに、というのが本音だったりするんですが(笑

通報する
お礼日時：2003/09/07 06:34

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

関連するカテゴリからQ&Aを探す

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報