A1300399510/min-offer-forum-issue
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

no message

Browse Source
This commit is contained in:
DESKTOP-RQ919RC\Pc
2025-10-14 20:19:41 +08:00
parent e7e68aa42b
commit 4a1218e2bf
8 changed files with 1075 additions and 64 deletions
Download Patch File Download Diff File Expand all files Collapse all files

234
contenteditable-accessory.html Normal file
View File

@@ -0,0 +1,234 @@
<!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>Contenteditable 键盘辅助栏</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;
}
.editable-group {
margin-bottom: 20px;
}
[contenteditable="true"] {
width: 100%;
min-height: 50px;
padding: 14px 16px;
border: 1px solid #ddd;
border-radius: 12px;
font-size: 16px;
background-color: white;
transition: border-color 0.2s;
outline: none;
}
[contenteditable="true"]:focus {
border-color: #007aff;
box-shadow: 0 0 0 2px rgba(0, 122, 255, 0.2);
}
[contenteditable="true"]:empty:before {
content: attr(data-placeholder);
color: #999;
pointer-events: none;
}
/* 键盘辅助栏样式 */
.keyboard-accessory {
position: fixed;
bottom: 0;
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;
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;
transition: opacity 0.2s;
}
.accessory-btn:hover {
opacity: 0.9;
}
.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;
}
[contenteditable="true"] {
background-color: #2c2c2e;
border-color: #3a3a3c;
color: white;
}
[contenteditable="true"]:empty:before {
color: #8e8e93;
}
.keyboard-accessory {
background-color: #1c1c1e;
border-top-color: #3a3a3c;
}
.cancel-btn {
color: #d1d1d6;
background-color: #2c2c2e;
}
.clear-btn {
color: #d1d1d6;
background-color: #3a3a3c;
}
}
</style>
</head>
<body>
<div class="container">
<h3>Contenteditable 键盘辅助栏</h3>
<div class="editable-group">
<div contenteditable="true" id="mainEditable" data-placeholder="点击输入内容..."></div>
</div>
<div class="editable-group">
<div contenteditable="true" data-placeholder="另一个可编辑区域..."></div>
</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>
// 获取DOM元素
const editables = document.querySelectorAll('[contenteditable="true"]');
const keyboardAccessory = document.getElementById("keyboardAccessory");
const cancelBtn = document.getElementById("cancelBtn");
const clearBtn = document.getElementById("clearBtn");
const confirmBtn = document.getElementById("confirmBtn");
let activeEditable = null; // 当前聚焦的可编辑元素
// 可编辑元素聚焦事件：显示辅助栏
editables.forEach((editable) => {
console.log("editable", editable);
editable.addEventListener("focus", (e) => {
activeEditable = e.target;
keyboardAccessory.classList.add("show");
});
editable.addEventListener("blur", () => {
// 延迟隐藏，确保按钮点击事件能触发
setTimeout(() => {
// 检查是否还有其他可编辑元素处于聚焦状态
const hasActive = Array.from(editables).some((el) => document.activeElement === el);
if (!hasActive) {
keyboardAccessory.classList.remove("show");
activeEditable = null;
}
}, 200);
});
});
// 取消按钮：取消聚焦（收起键盘）
cancelBtn.addEventListener("click", () => {
if (activeEditable) {
activeEditable.blur();
}
});
// 清除按钮：清空当前可编辑元素内容
clearBtn.addEventListener("click", () => {
if (activeEditable) {
activeEditable.textContent = "";
activeEditable.focus(); // 保持聚焦状态
}
});
// 完成按钮：获取内容并取消聚焦
confirmBtn.addEventListener("click", () => {
if (activeEditable) {
const value = activeEditable.textContent.trim();
if (value) {
alert(`输入内容：${value}`);
} else {
alert("内容为空");
}
activeEditable.blur();
}
});
// 监听窗口大小变化，确保辅助栏位置正确
window.addEventListener("resize", () => {
if (activeEditable) {
keyboardAccessory.classList.add("show");
}
});
</script>
</body>
</html>

9
css/index.css
View File

@@ -330,3 +330,12 @@ editor {
width: 100%; width: 100%;
height: 2.2667rem; height: 2.2667rem;
} }
.btn-f {
position: fixed;
top: 50px;
left: 0;
width: 100vw;
height: 50px;
background-color: #ff0000;
z-index: 999;
}

10
css/index.less
View File

@@ -389,3 +389,13 @@ editor {
} }
} }
} }
.btn-f {
position: fixed;
top: 50px;
left: 0;
width: 100vw;
height: 50px;
background-color: #ff0000;
z-index: 999;
}

265
fixed-keyboard-accessory.html Normal file
View File

@@ -0,0 +1,265 @@
<!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>固定定位的键盘辅助栏</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;
/* 关键：移除可能影响fixed定位的属性 */
transform: none !important;
perspective: none !important;
}
/* 长内容区域，用于测试滑动 */
.long-content {
height: 2000px; /* 足够长以触发滚动 */
}
.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;
right: 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; /* 确保在所有内容之上 */
/* 关键：消除滚动时的抖动 */
will-change: transform, bottom;
backface-visibility: hidden;
}
.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>固定定位的键盘辅助栏</h3>
<div class="input-group">
<input
type="text"
class="input-field"
placeholder="点击输入，辅助栏不随滑动移动..."
>
</div>
<!-- 长内容区域，用于测试滑动效果 -->
<div class="long-content">
<p>滚动页面测试辅助栏是否固定...</p>
<p style="margin-top: 500px;">中间位置...</p>
<p style="margin-top: 1000px;">底部位置...</p>
</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">清52除</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);
// 键盘高度检测器
class KeyboardManager {
constructor() {
this.height = 0;
this.initialHeight = this.getVisualHeight();
this.isVisible = false;
this.init();
}
getVisualHeight() {
return window.visualViewport?.height || window.innerHeight;
}
init() {
if (window.visualViewport) {
window.visualViewport.addEventListener('resize', () => this.update());
}
window.addEventListener('resize', () => this.update());
}
update() {
const currentHeight = this.getVisualHeight();
const diff = this.initialHeight - currentHeight;
if (diff > 100 && !this.isVisible) {
this.height = diff;
this.isVisible = true;
this.emit('show', this.height);
} 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) {
accessory.style.bottom = `${height}px`;
} else if (activeInput) {
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');
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();
}
});
// 禁止页面滚动时辅助栏偏移（可选）
window.addEventListener('scroll', () => {
if (accessory.classList.contains('show')) {
// 强制重绘，避免滚动时的视觉偏移
accessory.style.willChange = 'transform';
setTimeout(() => {
accessory.style.willChange = '';
}, 100);
}
});
</script>
</body>
</html>

14
index.html
View File

@@ -8,9 +8,11 @@
<link rel="stylesheet" href="./css/index.css" /> <link rel="stylesheet" href="./css/index.css" />
<script src="./js/vue.global.js"></script> <script src="./js/vue.global.js"></script>
<!-- <script src="https://unpkg.com/vconsole@latest/dist/vconsole.min.js"></script> --> <script src="https://unpkg.com/vconsole@latest/dist/vconsole.min.js"></script>
</head> </head>
<body> <body>
<!-- <div class="btn-f">点击</div> -->
<div class="container" id="appIndex"> <div class="container" id="appIndex">
<div class="title-box"> <div class="title-box">
<textarea class="input" id="title" placeholder="输入标题（非必填）" :maxlength="titleLength" v-model="title" ref="titleTextarea" @input="adjustTextareaHeight"></textarea> <textarea class="input" id="title" placeholder="输入标题（非必填）" :maxlength="titleLength" v-model="title" ref="titleTextarea" @input="adjustTextareaHeight"></textarea>
@@ -18,8 +20,8 @@
<div class="editor-box"> <div class="editor-box">
<div class="editor" :class="{ 'empty': isEmpty }" ref="editorRef" id="editor" placeholder="输入正文" contenteditable="true" @input="onEditorInput" @focus="onEditorFocus" @blur="onEditorBlur" v-html="info.content"></div> <div class="editor" :class="{ 'empty': isEmpty }" ref="editorRef" id="editor" placeholder="输入正文" contenteditable="true" @input="onEditorInput" @focus="onEditorFocus" @blur="onEditorBlur" v-html="info.content"></div>
<div class="operate-box" :class="{'fixed': fixedState}" ref="operateRef" contenteditable="false" @click="fixedState = false"> <div v-if="false" class="operate-box" :class="{'fixed': fixedState}" :style="{ 'bottom': keyboardHeight + 'px' }" ref="operateRef" contenteditable="false">
<div class="label flexflex" scroll-x> <div class="label flexflex" scroll-x>{{ keyboardHeight }}
<div class="item" v-for="index in 8" :key="index" @click.stop="insertLabel(`推荐标签${index}`)">#推荐标签{{ index }}</div> <div class="item" v-for="index in 8" :key="index" @click.stop="insertLabel(`推荐标签${index}`)">#推荐标签{{ index }}</div>
</div> </div>
@@ -71,10 +73,10 @@
</div> </div>
<script> <script>
// var vConsole = new window.VConsole(); var vConsole = new window.VConsole();
// console.log("Hello world"); console.log("Hello world");
// vConsole.destroy(); vConsole.destroy();
</script> </script>
<script src="./js/fontSize.js"></script> <script src="./js/fontSize.js"></script>

247
ios-keyboard-accessory.html Normal file
View 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>

133
js/index.js
View File

@@ -30,12 +30,18 @@ createApp({
const editorRef = ref(null); const editorRef = ref(null);
let isIOS = false; // 是否是 ISO 设备
onMounted(() => { onMounted(() => {
document.addEventListener("selectionchange", getFocusedNodeName); document.addEventListener("selectionchange", getFocusedNodeName);
// 添加键盘事件监听
document.addEventListener("keydown", handleDeleteKey); document.addEventListener("keydown", handleDeleteKey);
judgeIsEmpty(); judgeIsEmpty();
isIOS = /iPhone|iPad|iPod/.test(navigator.userAgent); // 检测iOS设备
console.log("isIOS", isIOS);
// 1. 监听视觉视口变化（iOS主要依赖这个）
if (window.visualViewport) window.visualViewport.addEventListener("resize", getKeyboardHeight.bind(this));
else window.addEventListener("resize", getKeyboardHeight.bind(this));
}); });
onUnmounted(() => { onUnmounted(() => {
@@ -206,9 +212,7 @@ createApp({
let focusedNode = selection.focusNode; let focusedNode = selection.focusNode;
// 如果是文本节点，取其父元素 // 如果是文本节点，取其父元素
if (focusedNode.nodeType === Node.TEXT_NODE) { if (focusedNode.nodeType === Node.TEXT_NODE) focusedNode = focusedNode.parentNode;
focusedNode = focusedNode.parentNode;
}
// 检查节点是否在.editor容器内 // 检查节点是否在.editor容器内
const isInEditor = editorRef.value.contains(focusedNode); const isInEditor = editorRef.value.contains(focusedNode);
@@ -225,45 +229,16 @@ createApp({
let lastSelection = null; let lastSelection = null;
onMounted(() => { onMounted(() => {
setTimeout(() => { setTimeout(() => focusLastNode(), 1000);
focusLastNode();
}, 1000);
}); });
const focusLastNode = () => { const focusLastNode = () => {
const editor = document.getElementById("editor"); const newRange = document.createRange();
const selection = window.getSelection(); const textNode = document.createTextNode("");
editorRef.value.appendChild(textNode);
// 清除现有选择范围 newRange.setStartAfter(textNode, 0);
selection.removeAllRanges(); newRange.setEndAfter(textNode, 0);
lastSelection = newRange;
// 创建新的范围对象
const range = document.createRange();
// 找到最后一个有效子节点（跳过空白文本节点）
let lastNode = editor.lastChild;
while (lastNode) {
// 检查是否为有效节点（非空白文本节点）
if (!(lastNode.nodeType === 3 && lastNode.textContent.trim() === "")) {
break;
}
lastNode = lastNode.previousSibling;
}
if (lastNode) {
// 设置范围到最后一个节点的末尾
range.setStartAfter(lastNode);
range.setEndAfter(lastNode);
} else {
// 如果编辑器为空，选择整个编辑器
range.selectNodeContents(editor);
range.collapse(false);
}
// 将范围添加到选择对象，不设置焦点
selection.addRange(range);
editorRef.value.blur();
}; };
let isEmpty = ref(true); let isEmpty = ref(true);
@@ -285,9 +260,9 @@ createApp({
let isBottomState = ref(false); // 底部按钮 显示 let isBottomState = ref(false); // 底部按钮 显示
const onEditorFocus = () => { const onEditorFocus = () => {
isBottomState.value = true; isBottomState.value = true;
setTimeout(() => getKeyboardHeight(), 500);
}; };
let fixedState = ref(false);
const onEditorBlur = () => { const onEditorBlur = () => {
isBottomState.value = false; isBottomState.value = false;
}; };
@@ -369,6 +344,7 @@ createApp({
// formData.append("type", "image"); // formData.append("type", "image");
// console.log("formData", formData); // console.log("formData", formData);
const reader = new FileReader();
reader.onload = (e) => { reader.onload = (e) => {
const imgSrc = e.target.result; const imgSrc = e.target.result;
console.log("imgSrc", imgSrc); console.log("imgSrc", imgSrc);
@@ -393,9 +369,20 @@ createApp({
span.innerHTML = `<span class="blue">#${label}</span> <span class="fill"></span> `; span.innerHTML = `<span class="blue">#${label}</span> <span class="fill"></span> `;
lastSelection.insertNode(span); lastSelection.insertNode(span);
// 移动光标到emoji后面 // 移动光标到元素后面并确保光标位置被正确设置和获取
lastSelection.setStartAfter(span); const newRange = document.createRange();
lastSelection.setEndAfter(span); newRange.setStartAfter(span);
newRange.setEndAfter(span);
// 更新选择范围
const selection = window.getSelection();
selection.removeAllRanges();
selection.addRange(newRange);
lastSelection = newRange;
// 手动触发selectionchange事件，确保其他组件知道光标位置变化
const selectionChangeEvent = new Event("selectionchange", { bubbles: true });
document.dispatchEvent(selectionChangeEvent);
judgeIsEmpty(); judgeIsEmpty();
}; };
@@ -412,9 +399,20 @@ createApp({
const textNode = document.createTextNode(emoji); const textNode = document.createTextNode(emoji);
lastSelection.insertNode(textNode); lastSelection.insertNode(textNode);
// 移动光标到emoji后面 // 移动光标到emoji后面并确保光标位置被正确设置和获取
lastSelection.setStartAfter(textNode); const newRange = document.createRange();
lastSelection.setEndAfter(textNode); newRange.setStartAfter(textNode);
newRange.setEndAfter(textNode);
// 更新选择范围
const selection = window.getSelection();
selection.removeAllRanges();
// selection.addRange(newRange);
lastSelection = newRange;
// 手动触发selectionchange事件，确保其他组件知道光标位置变化
const selectionChangeEvent = new Event("selectionchange", { bubbles: true });
document.dispatchEvent(selectionChangeEvent);
judgeIsEmpty(); judgeIsEmpty();
getCursorPosition("emoji"); getCursorPosition("emoji");
@@ -437,9 +435,9 @@ createApp({
// 计算目标位置：中间偏上（视口高度的30%位置） // 计算目标位置：中间偏上（视口高度的30%位置）
// 公式：元素顶部相对于视口的位置 + 滚动距离 - 目标位置（视口高度的30%） // 公式：元素顶部相对于视口的位置 + 滚动距离 - 目标位置（视口高度的30%）
// const targetPosition = window.scrollY + rect.top - viewportHeight * 0.3; // 30%位置，比正中间更靠上 // const targetPosition = window.scrollY + rect.top - viewportHeight * 0.3; // 30%位置，比正中间更靠上
const height = type == "emoji" ? 300 : keyboardHeight; const height = type == "emoji" ? 300 : keyboardHeight.value;
// console.log(height); // console.log(height);
const targetPosition = window.scrollY + rect.top - (originalWindowHeight - height) + 40; const targetPosition = window.scrollY + rect.top - (originalWindowHeight - height) + 110;
// 平滑滚动到目标位置 // 平滑滚动到目标位置
if (Math.abs(targetPosition - window.scrollY) > 10) { if (Math.abs(targetPosition - window.scrollY) > 10) {
@@ -458,22 +456,41 @@ createApp({
const operateRef = ref(null); const operateRef = ref(null);
onMounted(() => { onMounted(() => {
// 初始化时记录初始窗口高度 // 优先使用 visualViewport 高度（更准确反映视觉区域）
originalWindowHeight = window.visualViewport.height; if (window.visualViewport) originalWindowHeight = window.visualViewport.height;
keyboardHeight = originalWindowHeight / 2; else originalWindowHeight = window.innerHeight;
keyboardHeight.value = originalWindowHeight / 2; // 默认设置屏幕一般
}); });
let originalWindowHeight = 0; let originalWindowHeight = 0;
let keyboardHeight = 0; let keyboardHeight = ref(0);
// 获取键盘高度 // 获取键盘高度
const getKeyboardHeight = () => { const getKeyboardHeight = () => {
const currentHeight = window.visualViewport.height; console.log("getKeyboardHeight");
let currentHeight = "";
if (isIOS) currentHeight = window.visualViewport?.height || window.innerHeight;
else currentHeight = window.visualViewport ? window.visualViewport.height : window.innerHeight;
// 键盘弹出时，窗口高度会减小 // 计算高度差（键盘高度 = 初始高度 - 当前高度）
if (currentHeight < originalWindowHeight) keyboardHeight = originalWindowHeight - currentHeight; const diff = originalWindowHeight - currentHeight;
// 判断键盘状态（高度差 > 100 认为是键盘弹出，避免误判）
if (diff > 100) {
console.log("键盘弹出");
keyboardHeight.value = diff;
fixedState.value = true;
} else if (diff <= 100) {
console.log("键盘收取");
setTimeout(() => (fixedState.value = false), 200);
// 键盘收起时重置初始高度（避免屏幕旋转等场景导致偏差）
originalWindowHeight = currentHeight;
}
console.log("keyboardHeight：", keyboardHeight.value);
}; };
return { isBottomState, operateRef, onEditorBlur, onEditorFocus, cutAnonymity, isEmpty, selectEmoji, closeEmoji, openEmoji, optionEmoji, emojiState, insertLabel, editorRef, info, title, titleLength, titleTextarea, adjustTextareaHeight, isPTitle, paragraphTitle, insertImage, onEditorInput }; return { keyboardHeight, fixedState, isBottomState, operateRef, onEditorBlur, onEditorFocus, cutAnonymity, isEmpty, selectEmoji, closeEmoji, openEmoji, optionEmoji, emojiState, insertLabel, editorRef, info, title, titleLength, titleTextarea, adjustTextareaHeight, isPTitle, paragraphTitle, insertImage, onEditorInput };
}, },
}).mount("#appIndex"); }).mount("#appIndex");

227
keyboard-accessory.html Normal file
View File

@@ -0,0 +1,227 @@
<!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>H5 键盘辅助栏</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);
}
.input-field::placeholder {
color: #999;
}
/* 键盘辅助栏样式 */
.keyboard-accessory {
position: fixed;
bottom: 0;
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;
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;
transition: opacity 0.2s;
}
.accessory-btn:hover {
opacity: 0.9;
}
.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;
}
.input-field::placeholder {
color: #8e8e93;
}
.keyboard-accessory {
background-color: #1c1c1e;
border-top-color: #3a3a3c;
}
.cancel-btn {
color: #d1d1d6;
background-color: #2c2c2e;
}
.clear-btn {
color: #d1d1d6;
background-color: #3a3a3c;
}
}
</style>
</head>
<body>
<div class="container">
<h3>键盘辅助栏示例</h3>
<div class="input-group">
<input type="text" class="input-field" id="mainInput" placeholder="点击输入内容..." />
</div>
<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>
// 获取DOM元素
const inputs = document.querySelectorAll(".input-field");
const keyboardAccessory = document.getElementById("keyboardAccessory");
const cancelBtn = document.getElementById("cancelBtn");
const clearBtn = document.getElementById("clearBtn");
const confirmBtn = document.getElementById("confirmBtn");
let activeInput = null; // 当前聚焦的输入框
// 输入框聚焦事件：显示辅助栏
inputs.forEach((input) => {
input.addEventListener("focus", (e) => {
activeInput = e.target;
keyboardAccessory.classList.add("show");
});
input.addEventListener("blur", () => {
// 延迟隐藏，确保按钮点击事件能触发
setTimeout(() => {
if (!document.activeElement.classList.contains("input-field")) {
keyboardAccessory.classList.remove("show");
activeInput = null;
}
}, 200);
});
});
// 取消按钮：收起键盘
cancelBtn.addEventListener("click", () => {
if (activeInput) {
activeInput.blur();
}
});
// 清除按钮：清空当前输入框内容
clearBtn.addEventListener("click", () => {
if (activeInput) {
activeInput.value = "";
activeInput.focus(); // 保持聚焦状态
}
});
// 完成按钮：提交内容并收起键盘
confirmBtn.addEventListener("click", () => {
if (activeInput) {
const value = activeInput.value.trim();
if (value) {
alert(`输入内容：${value}`);
} else {
alert("输入框为空");
}
activeInput.blur();
}
});
// 监听窗口大小变化，确保辅助栏位置正确
window.addEventListener("resize", () => {
if (activeInput) {
keyboardAccessory.classList.add("show");
}
});
</script>
</body>
</html>