今、チャットのプログラムを作っています。
チャットのメッセージを「ユーザー名:メッセージ内容」という形で表示させています。ユーザー名は半角で15文字以内で
入力してもらい、15文字未満は空白を入れて、すべてのユーザー名を15文字に合わせて、メッセージ部分の開始位置を
揃えています。
現在チャットの内容が表示されるテキストエリアが、メッセージが長くて、横幅いっぱいに文字が表示されると、
改行されて、テキストエリアの左端に文字が表示されます。
現状:
ユーザーA:今日は晴れ。今日は晴れ。今日は
晴れ。(←ここで改行されて表示)
ユーザーB:こちらは曇り。こちちは曇り。こ
ちらは曇り。
しかし、見やすくする為にテキストエリアで折り返した文字の先頭を上の文章の頭と合わせたいと考えています。
目標:
ユーザーA:今日は晴れ。今日は晴れ。今日は
→→→→→→晴れ。(←改行された文字の先頭を上のメッセージ部分と合わせる。)
ユーザーB:こちらは曇り。こちちは曇り。こ
→→→→→→ちらは曇り。
上記のような方法の実現方法がわからず、良い方法をご教授お願いしたく
よろしくお願いします。
(追記)
ご回答ありがとうございます。自分の浅学で恐縮ですが、テキストエリアに
指摘された内容をどう反映すればいいのか手間取っています。コードの一部を追記します。
テキストエリアの部分にindentを反映させてみましたが、うまくいかず、<tb>や<span>は
<textarea>に組み合わせするとしたら、textareaを2つに分割して表示するということになるのでしょうか。
できれば、一つの<textarea>でやりたいと思っています。CSSに関しては、この部分は
```ここに言語を入力
<script>
function sendMessage() {
connection._session.publish(area, [myName, document.getElementById('msg').value], null, { exclude_me: false });
var msg = document.getElementById('msg');
msg.value = '';
msg.focus();
return false;
}
function writeMessage(arg) {
var person = arg[0];
var message = arg[1];
var chatarea = document.getElementById('chatarea');
chatarea.value = chatarea.value + '\n' + person + '> ' + message;
if(!chatarea) return;
chatarea.scrollTop = chatarea.scrollHeight;
}
</scrpt>
<html>
<form autocomplete="off" onsubmit="return sendMessage();">
<input type="text" id="msg" style="width:80%;">
<input type="submit" value="送信">
</form>
<textarea id="chatarea" style="width:100%; line-height:25px; font-size:13pt;" rows="20" readonly></textarea>