如何在uniapp中实现横屏悬浮键盘输入？

Question

我正在使用uniapp开发APP，目前有个需求是：横屏状态下需要用户输入因此需要调用键盘，但横屏状态下调用常规键盘会顶起内容。

眼下考虑的是悬浮键盘（参考王者荣耀等横屏手游输入文字时的键盘效果），请问如何实现呢？

Answer 1

自定义一个虚拟键盘:

<template>
  <view class="custom-keyboard-container" v-if="visible">
    <view class="keyboard-header">
      <text>发送消息</text>
      <text @click="close">关闭</text>
    </view>
    <view class="keyboard-input">
      <input type="text" v-model="inputValue" focus />
    </view>
    <view class="keyboard-buttons">
      <button @click="send">发送</button>
    </view>
  </view>
</template>

<script setup>
import { ref, defineEmits } from 'vue';

const emit = defineEmits(['send']);
const visible = ref(false);
const inputValue = ref('');

const show = () => {
  visible.value = true;
};

const close = () => {
  visible.value = false;
};

const send = () => {
  emit('send', inputValue.value);
  inputValue.value = '';
  close();
};

// 暴露方法给父组件调用
defineExpose({
  show,
  close
});
</script>

<style>
.custom-keyboard-container {
  position: fixed;
  bottom: 20%;
  left: 25%;
  width: 50%;
  z-index: 999;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}
.keyboard-header {
  display: flex;
  justify-content: space-between;
  padding: 10px;
  border-bottom: 1px solid #eee;
}
.keyboard-input {
  padding: 10px;
}
.keyboard-buttons {
  padding: 10px;
  display: flex;
  justify-content: flex-end;
}
</style>

页面里用：

<template>
  <view class="container">
    <!-- 主内容区域 -->
    <view class="main-content">
      <!-- 横屏游戏内容 -->
    </view>
    
    <!-- 聊天按钮 -->
    <button class="chat-button" @click="openKeyboard">聊天</button>
    
    <!-- 自定义键盘组件 -->
    <custom-keyboard ref="keyboardRef" @send="handleSendMessage" />
  </view>
</template>

<script setup>
import { ref } from 'vue';
import CustomKeyboard from './components/CustomKeyboard.vue';

const keyboardRef = ref(null);

const openKeyboard = () => {
  keyboardRef.value.show();
};

const handleSendMessage = (message) => {
  console.log('收到消息:', message);
  // 处理消息发送逻辑
};
</script>

<style>
.container {
  width: 100vw;
  height: 100vh;
  position: relative;
}
.main-content {
  width: 100%;
  height: 100%;
  /* 横屏游戏内容样式 */
}
.chat-button {
  position: absolute;
  bottom: 20px;
  right: 20px;
  z-index: 10;
}
</style>