248 lines
7.7 KiB
HTML
248 lines
7.7 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
|
||
<title>iOS 适配键盘辅助栏</title>
|
||
<style>
|
||
* {
|
||
margin: 0;
|
||
padding: 0;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
body {
|
||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
|
||
padding: 20px;
|
||
padding-bottom: 60px;
|
||
background-color: #f5f5f7;
|
||
}
|
||
|
||
.container {
|
||
max-width: 600px;
|
||
margin: 0 auto;
|
||
}
|
||
|
||
h3 {
|
||
color: #1d1d1f;
|
||
margin-bottom: 30px;
|
||
text-align: center;
|
||
}
|
||
|
||
.input-group {
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
.input-field {
|
||
width: 100%;
|
||
padding: 14px 16px;
|
||
border: 1px solid #ddd;
|
||
border-radius: 12px;
|
||
font-size: 16px;
|
||
background-color: white;
|
||
transition: border-color 0.2s;
|
||
}
|
||
|
||
.input-field:focus {
|
||
outline: none;
|
||
border-color: #007aff;
|
||
box-shadow: 0 0 0 2px rgba(0, 122, 255, 0.2);
|
||
}
|
||
|
||
/* 键盘辅助栏核心样式 */
|
||
.keyboard-accessory {
|
||
position: fixed;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 55px;
|
||
background-color: white;
|
||
border-top: 1px solid #eee;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding: 0 16px;
|
||
transition: transform 0.3s ease, bottom 0.3s ease;
|
||
transform: translateY(100%); /* 默认隐藏 */
|
||
z-index: 9999;
|
||
}
|
||
|
||
.keyboard-accessory.show {
|
||
transform: translateY(0); /* 显示时移出隐藏状态 */
|
||
}
|
||
|
||
.accessory-btn {
|
||
padding: 8px 20px;
|
||
border: none;
|
||
border-radius: 20px;
|
||
font-size: 15px;
|
||
font-weight: 500;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.cancel-btn {
|
||
color: #666;
|
||
background-color: #f5f5f5;
|
||
}
|
||
|
||
.clear-btn {
|
||
color: #333;
|
||
background-color: #eee;
|
||
}
|
||
|
||
.confirm-btn {
|
||
color: white;
|
||
background-color: #007aff;
|
||
}
|
||
|
||
/* 深色模式适配 */
|
||
@media (prefers-color-scheme: dark) {
|
||
body { background-color: #1c1c1e; }
|
||
h3 { color: #f5f5f7; }
|
||
.input-field {
|
||
background-color: #2c2c2e;
|
||
border-color: #3a3a3c;
|
||
color: white;
|
||
}
|
||
.keyboard-accessory {
|
||
background-color: #1c1c1e;
|
||
border-top-color: #3a3a3c;
|
||
}
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="container">
|
||
<h3>iOS 键盘辅助栏（贴合键盘）</h3>
|
||
<div class="input-group">
|
||
<input
|
||
type="text"
|
||
class="input-field"
|
||
placeholder="点击输入，辅助栏会贴合键盘..."
|
||
>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 键盘辅助栏 -->
|
||
<div class="keyboard-accessory" id="keyboardAccessory">
|
||
<button class="accessory-btn cancel-btn" id="cancelBtn">取消</button>
|
||
<button class="accessory-btn clear-btn" id="clearBtn">清除</button>
|
||
<button class="accessory-btn confirm-btn" id="confirmBtn">完成</button>
|
||
</div>
|
||
|
||
<script>
|
||
// 获取元素
|
||
const inputs = document.querySelectorAll('.input-field');
|
||
const accessory = document.getElementById('keyboardAccessory');
|
||
const cancelBtn = document.getElementById('cancelBtn');
|
||
const clearBtn = document.getElementById('clearBtn');
|
||
const confirmBtn = document.getElementById('confirmBtn');
|
||
let activeInput = null;
|
||
let isIOS = /iPhone|iPad|iPod/.test(navigator.userAgent); // 检测iOS设备
|
||
|
||
// 键盘高度检测器（核心：动态计算键盘高度）
|
||
class KeyboardManager {
|
||
constructor() {
|
||
this.height = 0;
|
||
this.initialHeight = this.getVisualHeight();
|
||
this.isVisible = false;
|
||
this.init();
|
||
}
|
||
|
||
// 获取视觉视口高度（iOS关键）
|
||
getVisualHeight() {
|
||
return window.visualViewport?.height || window.innerHeight;
|
||
}
|
||
|
||
init() {
|
||
// 监听视觉视口变化（iOS主要依赖这个）
|
||
if (window.visualViewport) {
|
||
window.visualViewport.addEventListener('resize', () => this.update());
|
||
}
|
||
// 监听传统resize（兼容Android）
|
||
window.addEventListener('resize', () => this.update());
|
||
}
|
||
|
||
update() {
|
||
const currentHeight = this.getVisualHeight();
|
||
const diff = this.initialHeight - currentHeight;
|
||
|
||
// 高度差>100px判定为键盘弹出（过滤屏幕旋转等干扰）
|
||
if (diff > 100 && !this.isVisible) {
|
||
this.height = diff;
|
||
this.isVisible = true;
|
||
this.emit('show', this.height);
|
||
}
|
||
// 高度差<50px判定为键盘收起
|
||
else if (diff <= 50 && this.isVisible) {
|
||
this.initialHeight = currentHeight; // 重置初始高度
|
||
this.isVisible = false;
|
||
this.emit('hide');
|
||
}
|
||
}
|
||
|
||
// 事件监听
|
||
on(type, callback) {
|
||
this[type] = callback;
|
||
}
|
||
|
||
emit(type, data) {
|
||
if (this[type]) this[type](data);
|
||
}
|
||
}
|
||
|
||
// 初始化键盘管理器
|
||
const keyboard = new KeyboardManager();
|
||
|
||
// 键盘弹出时：调整辅助栏位置到键盘顶部
|
||
keyboard.on('show', (height) => {
|
||
if (activeInput && isIOS) {
|
||
// iOS：辅助栏底部 = 键盘高度（使其悬浮在键盘顶部）
|
||
accessory.style.bottom = `${height}px`;
|
||
} else if (activeInput) {
|
||
// Android：辅助栏固定在底部（会被键盘顶起）
|
||
accessory.style.bottom = '0';
|
||
}
|
||
});
|
||
|
||
// 键盘收起时：重置辅助栏位置
|
||
keyboard.on('hide', () => {
|
||
accessory.style.bottom = '0';
|
||
});
|
||
|
||
// 输入框聚焦：显示辅助栏
|
||
inputs.forEach(input => {
|
||
input.addEventListener('focus', (e) => {
|
||
activeInput = e.target;
|
||
accessory.classList.add('show');
|
||
// 主动触发一次高度检测（解决iOS延迟问题）
|
||
setTimeout(() => keyboard.update(), 300);
|
||
});
|
||
|
||
input.addEventListener('blur', () => {
|
||
setTimeout(() => {
|
||
if (!document.activeElement.classList.contains('input-field')) {
|
||
accessory.classList.remove('show');
|
||
activeInput = null;
|
||
}
|
||
}, 200);
|
||
});
|
||
});
|
||
|
||
// 按钮事件
|
||
cancelBtn.addEventListener('click', () => activeInput?.blur());
|
||
clearBtn.addEventListener('click', () => {
|
||
if (activeInput) {
|
||
activeInput.value = '';
|
||
activeInput.focus();
|
||
}
|
||
});
|
||
confirmBtn.addEventListener('click', () => {
|
||
if (activeInput) {
|
||
alert(`输入内容：${activeInput.value || '空'}`);
|
||
activeInput.blur();
|
||
}
|
||
});
|
||
</script>
|
||
</body>
|
||
</html>
|