0

Хочу при нажатии на “Enter” сделать отправку сообщения.

document.addEventListener('DOMContentLoaded', function() {
  const messagesContainer = document.querySelector("#messages_container");
  const messageInput = document.querySelector('[name=message_input]');
  const sendMessageButton = document.querySelector('[name=send_message_button]');
  let websocketClient = new WebSocket("ws://localhost:12345");
  websocketClient.onopen = () => {
    console.log("Client conntected!");
    websocketClient.send("Hello!");
    sendMessageButton.onclick = () => {
      websocketClient.send(messageInput.value);
      messageInput.value = "";
    };
  };
  websocketClient.onmessage = (message) => {
    const newMessage = document.createElement('div');
    newMessage.innerHTML = message.data;
    messagesContainer.appendChild(newMessage);
    console.log(message.data);
  }
  document.onkeydown = () => {
    if (e.keyCode === 13) {
      messagesContainer.submit();
    }
  }
}, false);
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Version1</title>
</head>

<body>
  <div id="messages_container" style="border: 2px solid"></div>
  <div>
    <input type="text" name="message_input">
    <input type="button" name="send_message_button" value="Send message">
  </div>
  <div></div>
</body>

</html>

Я написал код для отправки на "Enter", но ничего не происходит, помогите пожалуйста

8
  • Покажите ваш HTML. Т.к. не понятно, что такое messages_container
    – SwaD
    Commented 20 февр. 2023 в 19:41
  • Извиняюсь, вот:
    – Dream
    Commented 21 февр. 2023 в 11:03
  • Так messages_container у вас div. У него нет метода submit(). Вы хотите отправить ответ по сокету?
    – SwaD
    Commented 21 февр. 2023 в 11:09
  • Да, через сокет. Мне нужно в html дописать?
    – Dream
    Commented 21 февр. 2023 в 15:49
  • Поправил ответ. Вам надо просто вызывать метод send вэбсокета.
    – SwaD
    Commented 21 февр. 2023 в 16:04

1 ответ 1

0

Вы не передаете в событие нажатия кнопки само событие, чтобы можно было считать код нажатой клавиши:

document.onkeydown = (e) => {
    if(e.key === 'Enter') {
        websocketClient.send(messageInput.value);
    }
}

Свойство keyCode устарело, от него лучше отказаться.

5
  • Лучше вместо key использовать code так как не зависит от языка. Конечно, для Enter разницы не много, но для общего случая...
    – eccs0103
    Commented 21 февр. 2023 в 11:24
  • @eccs0103 Возможно, однако для Enter, если жмякнуть на энтер доп клавы(нум пад), то приходит code=NumpadEnter
    – SwaD
    Commented 21 февр. 2023 в 11:31
  • Попробовал, к сожалению выдает ошибку в панеле разработчика websocket_client.js:31 Uncaught ReferenceError: socket is not defined at document.onkeydown (websocket_client.js:31:13)
    – Dream
    Commented 21 февр. 2023 в 16:16
  • Поправил. Вместо socket должен быть ваш websocketClient
    – SwaD
    Commented 21 февр. 2023 в 16:17
  • Все работает! Спасибо огромное, добрый человек)
    – Dream
    Commented 21 февр. 2023 в 16:19

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.