uni-app 输入框自动聚焦问题:进入页面后键盘弹出但输入框光标消失。已证实是hbuilder更新导致,3.5.3版本正常,往上版本则不行。

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

uni-app 输入框自动聚焦问题:进入页面后键盘弹出但输入框光标消失。已证实是hbuilder更新导致,3.5.3版本正常,往上版本则不行。

操作步骤

输入框自动聚焦focus

预期结果

进页面聚焦可以输入文本

实际结果

进页面没聚焦但是键盘弹出了无法输入文本

bug描述

【报Bug】输入框自动聚焦,进入页面后虽然键盘弹出了但是输入框的光标消失不见了。已证实是hbuilder更新的问题3.5.3版本打出来的包是正常的,往上就不行了。现在每次hbuilder版本更新让我们开发者都提心吊胆,每次都会出问题,都不敢更新了。

相关链接

开发环境与项目信息

项目信息 详情
产品分类 uniapp/App
PC开发环境操作系统 Windows
PC开发环境操作系统版本号 window10
HBuilderX类型 正式
HBuilderX版本号 3.6.2
手机系统 Android
手机系统版本号 Android 11
手机厂商 OPPO
手机机型 PCNM00
页面类型 vue
vue版本 vue2
打包方式 云端
项目创建方式 HBuilderX

48 回复

好像还是没有解决,华为手机鸿蒙3.0 input点击闪烁一下,就失去焦点了


官方的小程序的演示版本都存在这个问题,一直就没好过。

回复 a***@163.com: 自带的基带是没有问题,一定需要打包,成app或者wgt 通过uniapp-v8-release 来加载就出现

问题已确认,感谢反馈,已加分

hbuilder更新了还是不可以,已经重新打包测试了

回复 Enochjdy: 我也试了,能弹出软键盘,输入无效

麻烦再看下好吗?

回复 Enochjdy: 是指HBuilderX3.6.4版本还有此问题吗?

回复 Enochjdy: 提供下demo示例

回复 DCloud_UNI_Anne: 是的仍然没有修复

回复 DCloud_Android_ST: 就是进入页面默认输入框focus :true。弹出键盘输入框缺没有聚焦

回复 Enochjdy: 使用HX3.6.4 默认基座调试验证focus =true 功能正常

如果问题可以复现 提供demo 猜测与环境实现方式有关

回复 DCloud_Android_ST: 打包apk就会出现这个问题,通过基座下载没有问题,麻烦再看下目前还没修复啊

回复 1***@qq.com: 提供示例我们验证下 光说没修复 我们要示例都不提供 永远解决不了

回复 Enochjdy: 打包APK会出现这个问题,开发调试中没有问题

回复 2***@qq.com: 是的但是他们官方说修复我看整个评论区没一个开发说修复好了,这个bug这么难复现吗,就是云打包的问题,打包就出问题

回复 DCloud_Android_ST: 我怎么提供,是发邮件吗?给有问题的自定义基座apk吗?麻烦提供个邮箱

回复 Enochjdy: 附件 提供HX项目demo 不要apk shutao@dcloud.io

回复 DCloud_Android_ST: Demo已经发送过去了,查收一下,谢谢。

回复 Enochjdy: 25年了,还是有这个问题

同样问题,首页或者跳转页面后指定的Input组件无法聚焦,键盘弹出来了,光标有时在Input组件停留瞬间然后消失. <input type="text" auto-focus="true" /> 版本 hbuilder 3.6.3 202209217

现在公司都不敢更新hbuilder了。

更新HBuilderX3.6.4版本试下呢?

HBuilderX 3.6.4 已修复,如测试仍有问题,请提供运行环境信息及可复现demo,谢谢

大佬看看评论区吧,怎么bug还以修复了啊,大家都还是有问题的,这还要提供demo啊打包必出这个问题啊

回复 1***@qq.com: 这个BUG没修复,我又发现了新BUG,当多个input存在时,光标重新聚焦会失控,会聚焦到第一个Input上

回复 onFocus: 我现在就遇到了,怎么解决鸭5555

回复 onFocus: 这该咋解决啊 我就遇到了 坑得很。

回复 1***@163.com: 你解决了吗 我也遇到了

同样问题,本来是3.2.9的版本,本来懒得配置本地打包环境的,一直使用的云打包,怕有新的bug本地也一直没有更新,奈何云打包环境和生成wgt的环境会更新到新的bug,然后更新到了最新的3.6.4的最新版本了,依然存在这个bug,真要命啊,麻烦大佬们快快解决一下吧!!!!!! :focus="true"和auto-focus 都一样!

问题已处理 下个版本修复

回复 DCloud_Android_ST: 出新版本请提示,困扰许久

回复 Asurazzx: HBuilderX3.6.7-alpha已修复

HBuilderX3.6.7-alpha已修复

你好,使用了最新的alpha打包,多个输入框下,使用pda激光扫描,触发confirm事件,期望是聚焦下一个输入框,但是变成 “选中” 第一个输入框的内容,有遇到过吗o(╥﹏╥)o

我如果清空第一个输入框的内容,但是光标还是回到了第一个输入框,跳不到下一个框

为什么我离线打包的还是有问题,云打包和基座调试都没有问题,离线打包的SDK也是下载的最新的3.6.7.81556_20221018

回复 1***@163.com: 我也遇到了这个问题,本地基座调试没有问题,但是打的包就有这个问题

回复 RoseBEI: 就很烦,一个焦点问题,竟然来来回回折腾了那么久。

回复 黑咖:我这里有个思路不知道理解对不对,我们也是出现了一个小米的手机有这样的情况,键盘会弹出但是焦点丢失,因为我们的onshow和onload里面有数据请求,就把控制自动获取焦点的变量放在了所有接口请求完之后再设置为true,问题得到解决,不知道你的问题这样能不能解决。初步怀疑是界面渲染更新和键盘弹出同时的时候这里有问题

回复 RoseBEI: 我onshow和onload没写事件,和你情况不太一样,不过也谢谢你的回复,我现在只能请求客户自己去单元格点一下

HBuilderX3.8.7,小米手机,任然有这个问题存在

回复 1***@qq.com: 同样问题

2025年了官方还没解决这个问题

针对您提到的uni-app输入框自动聚焦问题,确实可能是由于HBuilderX版本更新导致的一些兼容性问题。以下是一种可能的解决方案,通过代码实现输入框在页面加载后自动聚焦,并尝试解决光标消失的问题。

解决方案

  1. 使用onPageShow生命周期函数:在uni-app中,onPageShow生命周期函数会在页面显示时触发,我们可以利用这个函数来设置输入框的聚焦。

  2. 延迟聚焦:有时候由于页面渲染或动画的原因,直接聚焦可能会导致问题。我们可以通过设置一个短暂的延迟来解决这个问题。

以下是一个示例代码,展示了如何在uni-app中实现这一功能:

<template>
  <view>
    <input ref="myInput" type="text" placeholder="请输入内容" />
  </view>
</template>

<script>
export default {
  data() {
    return {};
  },
  onPageShow() {
    // 使用setTimeout来延迟聚焦,避免页面渲染未完成导致的问题
    setTimeout(() => {
      this.$refs.myInput.focus();
    }, 100); // 延迟时间可以根据实际情况调整
  }
};
</script>

<style scoped>
/* 样式部分可以根据需要调整 */
</style>

解释

  • 模板部分:定义了一个简单的输入框,并使用ref属性给它一个引用名myInput
  • 脚本部分:在onPageShow生命周期函数中,使用setTimeout来延迟调用输入框的focus方法。这里设置的延迟时间是100毫秒,您可以根据实际情况调整这个值。
  • 样式部分:可以根据需要添加样式来调整输入框的外观。

注意事项

  • 延迟时间:延迟时间不宜过长,否则会影响用户体验。但过短可能无法解决渲染或动画未完成导致的问题。
  • 兼容性测试:由于您提到的是HBuilderX版本更新导致的问题,建议在多个版本上进行测试,确保解决方案的兼容性。
  • 其他可能的问题:如果上述方法仍然无法解决问题,可能需要考虑是否是其他库或框架的更新导致的问题,或者检查是否有其他代码干扰了输入框的聚焦行为。

希望这个解决方案能帮助您解决问题!如果还有其他疑问或需要进一步的帮助,请随时提问。

回到顶部