no message
This commit is contained in:
DESKTOP-RQ919RC\Pc
247
ios-keyboard-accessory.html
Normal file
247
ios-keyboard-accessory.html
Normal file
@@ -0,0 +1,247 @@
|
||||
<!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>
|
||||
Reference in New Issue
Block a user