uni-app nvue项目使用uni-easyinput组件,聚焦后无光标,键盘未弹起

发布于 1周前 作者 vueper 来自 Uni-App

uni-app nvue项目使用uni-easyinput组件,聚焦后无光标,键盘未弹起

类别 信息
产品分类 uniapp/App
PC开发环境 Windows
PC操作系统版本 Windows 10 专业版/22H2
HBuilderX类型 正式
HBuilderX版本 3.99
手机系统 Android
手机系统版本 Android 9.0
手机厂商 CRUISE Ge
手机机型 D715_V1.0.16
页面类型 nvue
Vue版本 vue3
打包方式 云端
项目创建方式 HBuilderX

操作步骤:

  1. 写一个标签,如下:
    <uni-easyinput v-model="formData.code" placeholder="请扫码" suffixIcon="scan" :trim="true" [@confirm](/user/confirm)="handleFouce"></uni-easyinput>
  2. 写另外一个标签,设置fouce属性,如下:
    const skuFocus = ref(false)
    <uni-easyinput v-model="formData.code2" placeholder="请扫码" suffixIcon="scan" :trim="true" :focus="skuFocus"></uni-easyinput>
  3. 触发handleFouce事件,设置skuFocus.value=true

预期结果:

聚焦后光标显示并唤起系统键盘

实际结果:

聚焦后光标未显示,系统键盘未唤起

bug描述:

nvue项目使用uni-easyinput组件,输入第一个文本框后,把第二个文本框自动聚焦。 文本框是聚焦了,但是聚焦后无光标,键盘未弹起 下面代码不显示,参考截图:


2 回复

我nvue里用easyinput样式直接是全乱掉的。。。。


uni-appnvue 项目中使用 uni-easyinput 组件时,如果遇到聚焦后无光标、键盘未弹起的问题,可能是由于以下原因导致的。以下是一些可能的解决方案:

1. 检查 nvue 页面的配置

确保你的 nvue 页面配置正确,特别是 input 组件的使用方式。nvue 页面的渲染机制与 vue 页面不同,可能需要特殊的处理。

2. 使用 input 组件替代 uni-easyinput

uni-easyinputuni-app 提供的一个封装好的输入框组件,但在 nvue 中可能存在兼容性问题。你可以尝试直接使用 input 组件,看看问题是否依然存在。

<template>
  <view>
    <input type="text" placeholder="请输入内容" @focus="onFocus" @blur="onBlur" />
  </view>
</template>

<script>
export default {
  methods: {
    onFocus() {
      console.log('输入框聚焦');
    },
    onBlur() {
      console.log('输入框失焦');
    }
  }
}
</script>

3. 检查 nvue 页面的样式

nvue 页面的样式与 vue 页面有所不同,特别是 flex 布局的使用。确保你的样式没有影响到 input 组件的正常显示和交互。

4. 检查 nvue 页面的生命周期

nvue 页面中,某些生命周期钩子可能与 vue 页面不同。确保你在正确的生命周期中进行操作。

5. 使用 uni.showKeyboard 手动弹出键盘

如果键盘未弹起,你可以尝试使用 uni.showKeyboard 方法手动弹出键盘。

uni.showKeyboard({
  defaultText: '',
  showConfirm: true,
  confirmText: '完成',
  success: function(res) {
    console.log('键盘弹出成功');
  },
  fail: function(err) {
    console.log('键盘弹出失败', err);
  }
});

6. 检查 nvue 页面的 manifest.json 配置

确保你的 manifest.json 文件中没有配置导致键盘无法弹出的选项。

7. 更新 uni-app 版本

如果你使用的是旧版本的 uni-app,尝试更新到最新版本,看看问题是否得到解决。

8. 检查 nvue 页面的兼容性

nvue 页面在某些平台上可能存在兼容性问题,特别是在 Android 平台上。确保你的代码在不同平台上都能正常工作。

9. 使用 focus 方法手动聚焦

你可以尝试在 mountedonReady 生命周期中使用 focus 方法手动聚焦输入框。

mounted() {
  this.$refs.myInput.focus();
}

10. 检查 nvue 页面的键盘事件

确保你在 nvue 页面中正确处理了键盘事件,特别是 focusblur 事件。

methods: {
  onFocus() {
    console.log('输入框聚焦');
  },
  onBlur() {
    console.log('输入框失焦');
  }
}
回到顶部
AI 助手
你好,我是IT营的 AI 助手
您可以尝试点击下方的快捷入口开启体验!