現在、メッセージ機能があるWebアプリケーションを作っており
WebSocketの規格を使っております。
しかし、始めてのことで色々とわからないので、
下記にある項目に関して、ご教授いただけると幸いです。
###メッセージ入力の処理をおこないたいのですが、意図した処理ができないでいます
メッセージを一度入力した後、もう一度入力しようとしても
カーソルの位置が初期状態へ戻らず、deleteキーを押してからでないと再度入力ができません。
また、2度目の入力の際にメッセンジャーのように次のボックス?へ入力したいが、同じボックスへの入力となってしまいます。
該当ページの必要部分だけを記載致します。
javascript
1<script type="text/javascript"> 2 var webSocket; 3 window.onload = function() { 4 var forRtoA = document.createElement('a'); 5 forRtoA.href = "loadMessage"; 6 webSocket = new WebSocket(forRtoA.href.replace("http://", "ws://").replace("https://", "wss://")); 7 var messageArea = document.getElementById("messageArea"); 8 9 var appendMessage = function(value, color) { 10 var messageElement = document.createElement("div"); 11 messageElement.style.color = color; 12 messageElement.innerText = value; 13 messageArea.insertBefore(messageElement, messageArea.firstChild); 14 } 15 webSocket.onopen = function() { 16 appendMessage("Opened", "blue"); 17 } 18 webSocket.onclose = function() { 19 appendMessage("Closed", "red"); 20 } 21 webSocket.onmessage = function(message) { 22 var data = JSON.parse(message.data); 23 if ("message" == data.command) { 24 appendMessage(data.text, "black"); 25 } else if ("error" == data.command) { 26 appendMessage(data.text, "red"); 27 } 28 } 29 webSocket.onerror = function(message) { 30 appendMessage(message, "red"); 31 } 32 var messageInput = document.getElementById("messageInput"); 33 messageInput.onkeypress = function(e) { 34 if (13 == e.keyCode) { 35 var message = messageInput.value; 36 if (webSocket && "" != message) { 37 webSocket.send(message); 38 messageInput.value = ""; 39 } 40 } 41 } 42 } 43 44 var date = new Date(); 45 var month = date.getMonth() + 1; 46 var day = date.getDate(); 47 var hours = date.Hours(); 48 var minutes = date.getMinutes(); 49 var time = month + "/" + day + " " + hours + ":" + minutes; 50</script>
html
1<li class="msg_send "> 2 <div class="inner-box"> 3 <p class="balloon_right" id="messageArea"></p> 4 <p class="time_send">ここに時間を出力</p> 5 </div> 6</li> 7<textarea id="messageInput" class="p-sendbox" name="sendarea" maxlength="1000" cols="40" rows="2" wrap="soft"></textarea>
初歩的な質問で申し訳ありませんが、
よろしくお願い致します。
あなたの回答
tips
プレビュー