uni-app 新开页面 keydown 监听 enter 键值监听不到

发布于 1周前 作者 yibo5220 来自 uni-app

uni-app 新开页面 keydown 监听 enter 键值监听不到

示例代码

plus.key.addEventListener("keydown", function(res){  
    console.log('APP监听-keydown=>', JSON.stringify(res))  
}, false);

操作步骤

页面非click事件 uni.navigateTo 打开展示页面

预期结果

展示页面正常监听enter键值

实际结果

除了enter键值都可以正常监听

bug描述

使用 plus.key.addEventListener 监听keydown键值， uni.navigateTo 新开页面，第一次打开这个页面不是通过click事件打开的，新页面监听不到enter(回车)键； 例如：TV首页：遥控器切换到图片列表A，按下回车键跳转展示页，此时展示页正常展示，但是监听不到enter(回车)键，上下左右空格键都可以正常监听

开发环境与版本信息

项目创建方式 PC开发环境操作系统 PC开发环境操作系统版本号 HBuilderX类型 HBuilderX版本号 手机系统 手机系统版本号 手机厂商 手机机型 页面类型 vue版本 打包方式
HBuilderX Windows Windows10 20H2 正式 3.2.12 Android Android 6.0 模拟器 mumu nvue vue2 云端

Harmonyos Next教程
4 回复

我是跳转页面后就失灵了


怎么21年的bug 23年了还是有啊

2025年了还没修复呢 真服了

在 uni-app 中，新开页面时监听 keydown 事件特别是 Enter 键确实可能遇到一些问题，这通常与页面生命周期、事件绑定方式或焦点管理有关。以下是一个简化的代码示例，展示如何在 uni-app 中新开页面并监听 Enter 键。

首先，确保你的项目已经正确设置了 uni-app 环境。

主页面（index.vue）

<template>
  <view>
    <button @click="openNewPage">打开新页面</button>
  </view>
</template>

<script>
export default {
  methods: {
    openNewPage() {
      uni.navigateTo({
        url: '/pages/newPage/newPage'
      });
    }
  }
}
</script>

新页面（newPage.vue）

在新页面中，我们将尝试监听 Enter 键。由于直接监听 keydown 可能不可靠，特别是在移动端，我们可以考虑使用输入框的 confirm-type 属性配合事件监听。

<template>
  <view>
    <input 
      type="text" 
      confirm-type="done" 
      @confirm="handleEnter" 
      placeholder="按Enter键" 
      focus />
  </view>
</template>

<script>
export default {
  methods: {
    handleEnter(e) {
      console.log('Enter 键被按下');
      // 在这里处理你的逻辑
    }
  },
  onReady() {
    // 确保输入框获得焦点，以便能够监听键盘事件
    const inputElement = this.$el.querySelector('input');
    if (inputElement) {
      inputElement.focus();
    }
  }
}
</script>

<style scoped>
input {
  width: 100%;
  padding: 10px;
  box-sizing: border-box;
}
</style>

解释

  1. 主页面：包含一个按钮，点击按钮时导航到新页面。
  2. 新页面：使用 input 元素并设置 confirm-type="done"，这样当用户完成输入并点击键盘上的“完成”按钮时，会触发 @confirm 事件。注意，在原生键盘上，“完成”按钮的行为可能类似于 Enter 键。
  3. 焦点管理：在 onReady 生命周期钩子中，确保输入框获得焦点，以便用户可以直接开始输入。

需要注意的是，由于 uni-app 主要面向移动端开发，原生键盘的行为可能与桌面浏览器有所不同。在某些情况下，监听 Enter 键的需求可能需要通过特定的输入框配置或自定义键盘组件来实现。如果确实需要在所有平台上监听标准的 keydown 事件，可能需要考虑使用原生开发或第三方库来增强键盘事件的处理能力。

回到顶部