43 lines
1.3 KiB
JavaScript
43 lines
1.3 KiB
JavaScript
|
// 监听回车键事件
|
||
|
|
document.getElementById('userInput').addEventListener('keydown', function(event) {
|
||
|
|
if (event.key === 'Enter') {
|
||
|
|
sendMessage();
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
// 控制聊天框显示和隐藏
|
||
|
|
function toggleChat(show) {
|
||
|
|
const chatBox = document.getElementById('chatContainer');
|
||
|
|
|
||
|
|
if (show) {
|
||
|
|
// 如果已经显示就不重复处理
|
||
|
|
if (chatBox.classList.contains('show')) return;
|
||
|
|
|
||
|
|
chatBox.style.display = 'block'; // 确保先显示再动画
|
||
|
|
chatBox.classList.remove('hide');
|
||
|
|
chatBox.classList.add('show');
|
||
|
|
|
||
|
|
document.addEventListener('click', outsideClickListener);
|
||
|
|
} else {
|
||
|
|
if (!chatBox.classList.contains('show')) return;
|
||
|
|
|
||
|
|
chatBox.classList.remove('show');
|
||
|
|
chatBox.classList.add('hide');
|
||
|
|
|
||
|
|
chatBox.addEventListener('animationend', function handler() {
|
||
|
|
chatBox.style.display = 'none';
|
||
|
|
chatBox.removeEventListener('animationend', handler);
|
||
|
|
});
|
||
|
|
|
||
|
|
document.removeEventListener('click', outsideClickListener);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
function outsideClickListener(event) {
|
||
|
|
const chatBox = document.getElementById('chatContainer');
|
||
|
|
const inputBox = document.getElementById('userInput');
|
||
|
|
|
||
|
|
if (!chatBox.contains(event.target) && !inputBox.contains(event.target)) {
|
||
|
|
toggleChat(false);
|
||
|
|
}
|
||
|
|
}
|