質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
MySQL

MySQL(マイエスキューエル)は、TCX DataKonsultAB社などが開発するRDBMS(リレーショナルデータベースの管理システム)です。世界で最も人気の高いシステムで、オープンソースで開発されています。MySQLデータベースサーバは、高速性と信頼性があり、Linux、UNIX、Windowsなどの複数のプラットフォームで動作することができます。

Java

Javaは、1995年にサン・マイクロシステムズが開発したプログラミング言語です。表記法はC言語に似ていますが、既存のプログラミング言語の短所を踏まえていちから設計されており、最初からオブジェクト指向性を備えてデザインされています。セキュリティ面が強力であることや、ネットワーク環境での利用に向いていることが特徴です。Javaで作られたソフトウェアは基本的にいかなるプラットフォームでも作動します。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

解決済

2回答

6063閲覧

【JavaScript】HTMLのtextareaで改行させて表示できない

Sfidante

総合スコア90

MySQL

MySQL(マイエスキューエル)は、TCX DataKonsultAB社などが開発するRDBMS(リレーショナルデータベースの管理システム)です。世界で最も人気の高いシステムで、オープンソースで開発されています。MySQLデータベースサーバは、高速性と信頼性があり、Linux、UNIX、Windowsなどの複数のプラットフォームで動作することができます。

Java

Javaは、1995年にサン・マイクロシステムズが開発したプログラミング言語です。表記法はC言語に似ていますが、既存のプログラミング言語の短所を踏まえていちから設計されており、最初からオブジェクト指向性を備えてデザインされています。セキュリティ面が強力であることや、ネットワーク環境での利用に向いていることが特徴です。Javaで作られたソフトウェアは基本的にいかなるプラットフォームでも作動します。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

0クリップ

投稿2015/08/03 02:39

編集2015/08/03 06:19

チャットのようなメッセージにやりとりに関して、
テキストエリアで改行入力をおこなっても、
JavaScriptで即時表示をおこなっているのですが、
表示がされません。

メッセージを送信と同時にMySQLへも保存しているのですが、
リロードしてみると、
改行したはずが、改行ではなく
スペースが入っての表示になってしまいます。

MySQLに関しては、改行された状態での挿入になっています。

入力された時と出力するときに
それぞれ処理が必要なのでしょうが、
調べてもPHPのコードしかなくよくわかりません。

ご教授よろしくお願いいたします。

下記にJavaScriptとHTMLのコードを記載いたします。

javascript

1var webSocket; 2window.onload = function() { 3 var forRtoA = document.createElement('a'); 4 forRtoA.href = "loadMessage"; 5 webSocket = new WebSocket(forRtoA.href.replace("http://", "ws://").replace("https://", "wss://")); 6 var messageArea = document.getElementById("message-list"); 7 var sessionid = document.getElementById("sessionID").value; 8 var photo = document.getElementById("yourphoto").value; 9 10 var appendMessage = function(value, session) { 11 var messageElement = document.createElement("messageArea"); 12 var time = new Date(); 13 var month = time.getMonth() + 1; 14 if(month < 10) { month = "0" + month; } 15 var day = time.getDate(); 16 if(day < 10) { day = "0" + day; } 17 var hour = time.getHours(); 18 if(hour < 10) { hour = "0" + hour; } 19 var minute = time.getMinutes(); 20 if(minute < 10) { minute = "0" + minute; } 21 var now = month + "/" + day + " " + hour + ":" + minute; 22 if(session == sessionid){ 23 messageElement.innerHTML = '<li class="msg_send"><div class="inner-box"><p class="balloon_right" id="messageArea">' + value + '</p></div></li><p class="time_send">' + now + '</p>'; 24 }else{ 25 messageElement.innerHTML = '<li class="msg_recieve"><a href="" target="_blank"><img src="' + photo + '" alt="メッセージ相手写真" class="c-message_photo img-circle c-photo_mini"></a><div class="inner-box2"><p class="balloon_left">' + value + '</p></div></li><p class="time_recieve">' + now + '</p>'; 26 } 27 messageArea.appendChild(messageElement); 28 } 29 30 webSocket.onmessage = function(message) { 31 var data = JSON.parse(message.data); 32 appendMessage(data.text, data.sessionid); 33 } 34 35 var messageInput = document.getElementById("c-btn_chenge"); 36 var messageText = document.getElementById("messageInput"); 37 messageInput.onclick = function() { 38 var message = messageText.value; 39 if (webSocket && "" != message) { 40 webSocket.send(message); 41 messageText.value = ""; 42 } 43 } 44}

html

1<div class="message_inner_box c-center__margin"> 2 <div class="c-center message-area"> 3 <input type="text" id="messageInput" class="p-sendbox" name="sendarea"> 4 <p><a href="">同意事項</a>に同意の上、送信してください。</p> 5 <a href="javascript:;" id="c-btn_chenge"><img src="image/images/send_btn_03.png" alt="送信ボタン" class="p-message_send"></a> 6 </div> 7 </div>

追記
改変後のコード

javascript

1var webSocket; 2window.onload = function() { 3 var forRtoA = document.createElement('a'); 4 forRtoA.href = "loadMessage"; 5 webSocket = new WebSocket(forRtoA.href.replace("http://", "ws://").replace("https://", "wss://")); 6 var messageArea = document.getElementById("message-list"); 7 var sessionid = document.getElementById("sessionID").value; 8 var photo = document.getElementById("yourphoto").value; 9 10 var appendMessage = function(value, session) { 11 var string = value.replace("/\r\n|\n|\r/g", "<br>"); 12 var messageElement = document.createElement("messageArea"); 13 var time = new Date(); 14 var month = time.getMonth() + 1; 15 if(month < 10) { month = "0" + month; } 16 var day = time.getDate(); 17 if(day < 10) { day = "0" + day; } 18 var hour = time.getHours(); 19 if(hour < 10) { hour = "0" + hour; } 20 var minute = time.getMinutes(); 21 if(minute < 10) { minute = "0" + minute; } 22 var now = month + "/" + day + " " + hour + ":" + minute; 23 if(session == sessionid){ 24 messageElement.innerHTML = '<li class="msg_send"><div class="inner-box"><p class="balloon_right" id="messageArea">' + string + '</p></div></li><p class="time_send">' + now + '</p>'; 25 }else{ 26 messageElement.innerHTML = '<li class="msg_recieve"><a href="" target="_blank"><img src="' + photo + '" alt="メッセージ相手写真" class="c-message_photo img-circle c-photo_mini"></a><div class="inner-box2"><p class="balloon_left">' + string + '</p></div></li><p class="time_recieve">' + now + '</p>'; 27 } 28 messageArea.appendChild(messageElement); 29 var message_box = document.getElementById("message_box"); 30 message_box.scrollTop = message_box; 31 } 32 33 webSocket.onmessage = function(message) { 34 var data = JSON.parse(message.data); 35 appendMessage(data.text, data.sessionid); 36 } 37 38 var messageInput = document.getElementById("c-btn_chenge"); 39 var messageText = document.getElementById("messageInput"); 40 messageInput.onclick = function() { 41 var message = messageText.value; 42 if (webSocket && "" != message) { 43 webSocket.send(message); 44 messageText.value = ""; 45 } 46 } 47}

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

ベストアンサー

改行を<br>に変更してみてください。

投稿2015/08/03 02:46

orange0190

総合スコア1698

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

Sfidante

2015/08/03 02:53

ご回答ありがとうございます。 上記のコードではJavaScriptの「value」が文字列なのですが、 それを改行コードで分割して、 それを<br>に置き換えるイメージでしょうか?
orange0190

2015/08/03 02:57

replaceメソッドを利用するといいんじゃないでしょうか。
orange0190

2015/08/03 03:00 編集

value.replace("/\r\n|\n|\r/g", "<br>"); こんな感じかと思います。
Sfidante

2015/08/03 06:18

ご丁寧にありがとうございます。 そのとおりにやったり、 ネットで調べて、 var string = value.replace("/\r?\n/g", "<br>"); 等でやってみましたが、 うまくいきませんでした。 他の箇所に何かしらのミスが有るのでしょうか? デペロッパーで確認したところ Uncaught SyntaxError: Unexpected token とのことで文法に関数エラーのようですが、 原因が見あたっていません。 改変後のコードを追記として載せます。
orange0190

2015/08/03 06:28

エラーの出ている行数を教えてください。
Sfidante

2015/08/03 06:36

失礼いたしました。 1行目です。 <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> です。 この記載の仕方がおかしいのでしょうか? 他のページでも同じ記載の仕方をしております。
orange0190

2015/08/03 06:39

JSONのパースに失敗している可能性があります。
Sfidante

2015/08/03 06:58

JSONで改行の取り扱いで 躓くケースが多いようですね。 少々JSONに関することから調べてみます。 ありがとうございます。
guest

0

改行は CR LF (\r\n) や LF (\n) などで保持されているはずですので、ブラウザへ表示の際は <br>に変換する必要があります。

投稿2015/08/03 02:46

編集2015/08/03 02:47
rik

総合スコア1151

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

Sfidante

2015/08/03 02:54

ご回答ありがとうございます。 ShunsukeIzuiさんと同じ質問になってしまうのですが、 上記のコードではJavaScriptの「value」が文字列なのですが、 それを改行コードで分割して、 それを<br>に置き換えるイメージでしょうか?
rik

2015/08/03 03:06

replaceか、splitで出来ます。 やり方は色々ありますし、注意点もありますので新規質問でもいいかも知れません。
Sfidante

2015/08/03 06:22

コメントありがとうございます。 比較的簡単なのかと思っていましたが、 新たな質問も考えてみます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問