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