fix(ControlBar): 修复键盘事件监听范围,改为全局监听window
将键盘事件从输入框的局部监听改为window全局监听,确保页面任意位置按下键盘即可向被控端发送指令。同时保留输入框聚焦逻辑,以兼容移动端软键盘输入场景。
This commit is contained in:
@@ -1,5 +1,5 @@
|
|||||||
<script setup>
|
<script setup>
|
||||||
import { ref, watch } from 'vue';
|
import { ref, watch, onMounted, onUnmounted } from 'vue';
|
||||||
import { store, sendKeyDown, sendKeyUp, sendResolutionChange, toggleRecording } from '../store/controllerStore';
|
import { store, sendKeyDown, sendKeyUp, sendResolutionChange, toggleRecording } from '../store/controllerStore';
|
||||||
|
|
||||||
// Android KeyEvent 键值(与被控端 SystemInputUtils 注入一致)
|
// Android KeyEvent 键值(与被控端 SystemInputUtils 注入一致)
|
||||||
@@ -70,15 +70,15 @@ function lookupKeyCode(e) {
|
|||||||
return null;
|
return null;
|
||||||
}
|
}
|
||||||
|
|
||||||
function onKeyInputDown(e) {
|
// 固定按键:按下/抬起分离(如电源键需要真实按下-抬起配对)
|
||||||
|
function onKeyCaptureDown(e) {
|
||||||
if (!store.dataChannelOpen) return;
|
if (!store.dataChannelOpen) return;
|
||||||
const m = lookupKeyCode(e);
|
const m = lookupKeyCode(e);
|
||||||
if (!m) return;
|
if (!m) return;
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
sendKeyDown(m.code);
|
sendKeyDown(m.code);
|
||||||
}
|
}
|
||||||
|
function onKeyCaptureUp(e) {
|
||||||
function onKeyInputUp(e) {
|
|
||||||
if (!store.dataChannelOpen) return;
|
if (!store.dataChannelOpen) return;
|
||||||
const m = lookupKeyCode(e);
|
const m = lookupKeyCode(e);
|
||||||
if (!m) return;
|
if (!m) return;
|
||||||
@@ -89,10 +89,17 @@ function onKeyInputUp(e) {
|
|||||||
function focusKeyInput() {
|
function focusKeyInput() {
|
||||||
keyInputRef.value && keyInputRef.value.focus();
|
keyInputRef.value && keyInputRef.value.focus();
|
||||||
}
|
}
|
||||||
// 点击区域任意位置自动聚焦输入框,方便直接用键盘打字
|
|
||||||
function onCaptureClick() {
|
// 监听整个 window 的键盘事件,保证页面任意位置(不依赖聚焦到某个输入框)
|
||||||
focusKeyInput();
|
// 按下键盘即可向被控端发送按键指令。移动端软键盘不触发 keydown,故保留输入框聚焦。
|
||||||
}
|
onMounted(() => {
|
||||||
|
window.addEventListener('keydown', onKeyCaptureDown);
|
||||||
|
window.addEventListener('keyup', onKeyCaptureUp);
|
||||||
|
});
|
||||||
|
onUnmounted(() => {
|
||||||
|
window.removeEventListener('keydown', onKeyCaptureDown);
|
||||||
|
window.removeEventListener('keyup', onKeyCaptureUp);
|
||||||
|
});
|
||||||
|
|
||||||
function onResolutionChange() {
|
function onResolutionChange() {
|
||||||
if (!store.dataChannelOpen) return;
|
if (!store.dataChannelOpen) return;
|
||||||
@@ -191,16 +198,16 @@ watch(() => store.currentResolution, (res) => {
|
|||||||
{{ k.label }}
|
{{ k.label }}
|
||||||
</button>
|
</button>
|
||||||
|
|
||||||
<div class="keyboard-capture" @click="onCaptureClick">
|
<div class="keyboard-capture">
|
||||||
<label class="kb-label">键盘输入:</label>
|
<label class="kb-label">键盘输入:</label>
|
||||||
<input
|
<input
|
||||||
ref="keyInputRef"
|
ref="keyInputRef"
|
||||||
class="kb-input"
|
class="kb-input"
|
||||||
type="text"
|
type="text"
|
||||||
placeholder="点击此处后可直接用键盘打字"
|
readonly
|
||||||
|
placeholder="已全局监听,直接在页面上打字即可(手机请点此聚焦)"
|
||||||
:disabled="!store.dataChannelOpen"
|
:disabled="!store.dataChannelOpen"
|
||||||
@keydown="onKeyInputDown"
|
@click="focusKeyInput"
|
||||||
@keyup="onKeyInputUp"
|
|
||||||
@blur="keyLog = ''"
|
@blur="keyLog = ''"
|
||||||
/>
|
/>
|
||||||
<span class="kb-hint">支持字母/数字/符号/方向键/修饰键组合</span>
|
<span class="kb-hint">支持字母/数字/符号/方向键/修饰键组合</span>
|
||||||
|
|||||||
Reference in New Issue
Block a user