移动端聊天界面点击发送按钮后输入栏先下移再复位的问题求助及代码排查

阿华AIGC实验室

2026-4-7

我最近在用HTML、CSS和JavaScript做一个聊天界面，遇到了个挺头疼的问题：每次点击「发送」按钮发消息时，底部的输入栏会先突然往下跳一下，紧接着又弹回原来的位置。这个问题特别奇怪，只有在我用python3 -m http.server启动本地服务，再用移动端浏览器（比如安卓上的Chrome）打开页面时才会出现。我猜可能是DOM更新或者虚拟键盘触发了布局重排，但试了好几个方法都没搞定：

用event.preventDefault()阻止了默认表单行为
确保发送消息后输入框重新获得焦点
给相关区域加了内边距，避免和虚拟键盘重叠
给输入栏容器.chat-input-area设置了position: fixed

可不管怎么试，那个跳动的问题还是存在，实在搞不懂哪里出问题了。

复现步骤

执行命令启动本地服务器：python3 -m http.server
在移动端浏览器中访问服务器地址
在输入框中输入一条消息，点击「发送」按钮
观察底部输入栏：会先向下跳动，然后快速回到原位置

完整代码

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
</head>
<body>
    <div class="chat-container">
        <div class="chat-messages" id="chatMessages">
            <div class="message">Hello!</div>
        </div>
        <div class="chat-input-area">
            <input type="text" id="chatMessageInput" placeholder="Type a message..." />
            <button id="sendMessageBtn">Send</button>
        </div>
    </div>
</body>
</html>

CSS

* {
    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;
}

JavaScript

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;
});

有没有朋友遇到过类似的问题？或者能帮我排查下代码里可能导致这个布局跳动的原因吗？实在是卡在这里了，感谢大家！