console
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
<meta name="format-detection" content="telephone=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<title>聊天应用</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
-webkit-tap-highlight-color: transparent;
-webkit-touch-callout: none;
}
html, body {
height: 100%;
width: 100%;
}
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
background-color: #f5f5f5;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
min-height: 100vh;
}
.chat-container {
width: 100vw;
max-width: 480px;
height: 100vh;
margin: 0 auto;
display: flex;
flex-direction: column;
background-color: #fff;
position: relative;
box-shadow: 0 2px 16px rgba(0,0,0,0.06);
}
.chat-header {
padding: 15px;
background-color: #1890ff;
color: white;
text-align: center;
position: relative;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
z-index: 100;
}
.chat-messages {
flex: 1;
overflow-y: auto;
padding: 15px;
display: flex;
flex-direction: column;
gap: 10px;
-webkit-overflow-scrolling: touch;
position: relative;
}
.message {
max-width: 70%;
padding: 10px 15px;
border-radius: 15px;
margin-bottom: 5px;
position: relative;
word-wrap: break-word;
animation: messageAppear 0.3s ease-out;
}
@keyframes messageAppear {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.message.sent {
align-self: flex-end;
background-color: #1890ff;
color: white;
border-bottom-right-radius: 5px;
}
.message.received {
align-self: flex-start;
background-color: #f0f0f0;
color: #333;
border-bottom-left-radius: 5px;
}
.message-time {
font-size: 12px;
color: #999;
margin-top: 5px;
text-align: right;
}
.chat-input-container {
padding: 10px;
background-color: #fff;
border-top: 1px solid #eee;
display: flex;
gap: 10px;
align-items: center;
position: relative;
z-index: 100;
padding-bottom: env(safe-area-inset-bottom);
}
.chat-input {
flex: 1;
padding: 12px 15px;
border: 1px solid #ddd;
border-radius: 20px;
outline: none;
font-size: 16px;
background-color: #f8f8f8;
transition: all 0.3s ease;
-webkit-appearance: none;
appearance: none;
}
.chat-input:focus {
border-color: #1890ff;
background-color: #fff;
box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.1);
}
.send-button {
background-color: #1890ff;
color: white;
border: none;
padding: 12px 20px;
border-radius: 20px;
cursor: pointer;
font-size: 16px;
transition: all 0.3s ease;
user-select: none;
-webkit-user-select: none;
-webkit-appearance: none;
appearance: none;
}
.send-button:active {
transform: scale(0.95);
background-color: #40a9ff;
}
.message-status {
font-size: 12px;
color: #999;
margin-top: 2px;
}
.typing-indicator {
padding: 10px;
color: #666;
font-style: italic;
display: none;
animation: fadeIn 0.3s ease;
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
.message-content {
line-height: 1.4;
}
.chat-messages::-webkit-scrollbar {
width: 6px;
}
.chat-messages::-webkit-scrollbar-track {
background: #f1f1f1;
}
.chat-messages::-webkit-scrollbar-thumb {
background: #888;
border-radius: 3px;
}
.chat-messages::-webkit-scrollbar-thumb:hover {
background: #555;
}
</style>
</head>
<body>
<div class="chat-container">
<div class="chat-header">
<h2>聊天室</h2>
</div>
<div class="chat-messages" id="chatMessages">
<div class="message received">
<div class="message-content">你好！欢迎来到聊天室</div>
<div class="message-time">10:00</div>
</div>
<div class="message sent">
<div class="message-content">谢谢！很高兴见到你</div>
<div class="message-time">10:01</div>
<div class="message-status">已读</div>
</div>
</div>
<div class="typing-indicator" id="typingIndicator">
对方正在输入...
</div>
<div class="chat-input-container">
<input type="text"
class="chat-input"
id="messageInput"
placeholder="输入消息..."
autocomplete="off"
autocorrect="off"
autocapitalize="off"
spellcheck="false"
inputmode="text"
enterkeyhint="send">
<button class="send-button" onclick="sendMessage()">发送</button>
</div>
</div>
<script>
const messageInput = document.getElementById('messageInput');
const chatMessages = document.getElementById('chatMessages');
const typingIndicator = document.getElementById('typingIndicator');
let isComposing = false;
function scrollToBottom() {
chatMessages.scrollTop = chatMessages.scrollHeight;
}
scrollToBottom();
messageInput.addEventListener('compositionstart', () => {
isComposing = true;
});
messageInput.addEventListener('compositionend', () => {
isComposing = false;
});
function sendMessage() {
const message = messageInput.value.trim();
if (message && !isComposing) {
const now = new Date();
const timeString = now.getHours().toString().padStart(2, '0') + ':' +
now.getMinutes().toString().padStart(2, '0');
const messageElement = document.createElement('div');
messageElement.className = 'message sent';
messageElement.innerHTML = `
<div class="message-content">${message}</div>
<div class="message-time">${timeString}</div>
<div class="message-status">发送中</div>
`;
chatMessages.appendChild(messageElement);
messageInput.value = '';
scrollToBottom();
setTimeout(() => {
messageElement.querySelector('.message-status').textContent = '已发送';
}, 1000);
setTimeout(() => {
messageElement.querySelector('.message-status').textContent = '已读';
}, 2000);
typingIndicator.style.display = 'block';
setTimeout(() => {
typingIndicator.style.display = 'none';
const replyElement = document.createElement('div');
replyElement.className = 'message received';
replyElement.innerHTML = `
<div class="message-content">收到你的消息了！</div>
<div class="message-time">${timeString}</div>
`;
chatMessages.appendChild(replyElement);
scrollToBottom();
}, 3000);
}
}
messageInput.addEventListener('keypress', (e) => {
if (e.key === 'Enter' && !e.shiftKey && !isComposing) {
e.preventDefault();
sendMessage();
}
});
messageInput.addEventListener('focus', () => {
setTimeout(scrollToBottom, 100);
});
document.body.addEventListener('touchmove', (e) => {
if (e.target === chatMessages) {
e.preventDefault();
}
}, { passive: false });
window.addEventListener('resize', () => {
scrollToBottom();
});
</script>
</body>
</html>