Почему моя панель ввода прыгает вниз, а затем возвращается в свое положение после нажатия кнопки отправки? ⇐ Javascript

[Anonymous]

Я строю интерфейс чата, используя HTML, CSS и JavaScript. Каждый раз, когда я отправляю сообщение, используя кнопку «Отправить», входная панель (где пользовательские сообщения о типах) на мгновение прыгает вниз, а затем возвращается в исходную позицию. Похоже, что проблема с рефлекторами макета, вызванная обновлениями DOM или виртуальной клавиатурой. Клавиатура
[*] Используемая позиция: Исправлена для .CHAT-input-area

Но проблема все еще сохраняется. http.server
[*] Откройте страницу в мобильном браузере
[*] Введите сообщение и нажмите кнопку «/strong>
[*] Входной панель и возвращается к своей первоначальной позиции
class = "Snippet">

Код: Выделить всё

const chatMessages = document.getElementById('chatMessages');
const chatInput = document.getElementById('chatMessageInput');
const sendBtn = document.getElementById('sendMessageBtn');

sendBtn.addEventListener('click', () => {
const message = chatInput.value.trim();

if (!message) return;

const msgDiv = document.createElement('div');
msgDiv.className = 'message';
msgDiv.textContent = message;
chatMessages.appendChild(msgDiv);
chatInput.value = '';
chatInput.focus();
chatMessages.scrollTop = chatMessages.scrollHeight;
});< /code>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

body,
html {
height: 100%;
font-family: sans-serif;
}

.chat-container {
display: flex;
flex-direction: column;
height: 100vh;
background: #111;
color: white;
}

.chat-messages {
flex-grow: 1;
overflow-y: auto;
padding: 16px;
}

.message {
margin: 8px 0;
}

.chat-input-area {
position: fixed;
bottom: 0;
left: 0;
right: 0;
display: flex;
padding: 12px;
background: #222;
}

.chat-input-area input {
flex: 1;
padding: 10px;
font-size: 1rem;
}

.chat-input-area button {
padding: 10px 16px;
margin-left: 8px;
background: #8B5CF6;
color: white;
border: none;
}< /code>











Hello!



Send

Подробнее здесь: https://stackoverflow.com/questions/797 ... clicking-t