uni-app 输入框自动聚焦问题:进入页面后键盘弹出但输入框光标消失。已证实是hbuilder更新导致,3.5.3版本正常,往上版本则不行。
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 |
好像还是没有解决,华为手机鸿蒙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会出现这个问题,开发调试中没有问题
回复 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: 出新版本请提示,困扰许久
HBuilderX3.6.7-alpha已修复
你好,使用了最新的alpha打包,多个输入框下,使用pda激光扫描,触发confirm事件,期望是聚焦下一个输入框,但是变成 “选中” 第一个输入框的内容,有遇到过吗o(╥﹏╥)o
我如果清空第一个输入框的内容,但是光标还是回到了第一个输入框,跳不到下一个框
为什么我离线打包的还是有问题,云打包和基座调试都没有问题,离线打包的SDK也是下载的最新的3.6.7.81556_20221018
回复 1***@163.com: 我也遇到了这个问题,本地基座调试没有问题,但是打的包就有这个问题
3.7.11存在
回复 RoseBEI: 就很烦,一个焦点问题,竟然来来回回折腾了那么久。
回复 黑咖:我这里有个思路不知道理解对不对,我们也是出现了一个小米的手机有这样的情况,键盘会弹出但是焦点丢失,因为我们的onshow和onload里面有数据请求,就把控制自动获取焦点的变量放在了所有接口请求完之后再设置为true,问题得到解决,不知道你的问题这样能不能解决。初步怀疑是界面渲染更新和键盘弹出同时的时候这里有问题
回复 RoseBEI: 我onshow和onload没写事件,和你情况不太一样,不过也谢谢你的回复,我现在只能请求客户自己去单元格点一下
HBuilderX3.8.7,小米手机,任然有这个问题存在
回复 1***@qq.com: 同样问题
针对您提到的uni-app输入框自动聚焦问题,确实可能是由于HBuilderX版本更新导致的一些兼容性问题。以下是一种可能的解决方案,通过代码实现输入框在页面加载后自动聚焦,并尝试解决光标消失的问题。
解决方案
-
使用
onPageShow
生命周期函数:在uni-app中,onPageShow
生命周期函数会在页面显示时触发,我们可以利用这个函数来设置输入框的聚焦。 -
延迟聚焦:有时候由于页面渲染或动画的原因,直接聚焦可能会导致问题。我们可以通过设置一个短暂的延迟来解决这个问题。
以下是一个示例代码,展示了如何在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版本更新导致的问题,建议在多个版本上进行测试,确保解决方案的兼容性。
- 其他可能的问题:如果上述方法仍然无法解决问题,可能需要考虑是否是其他库或框架的更新导致的问题,或者检查是否有其他代码干扰了输入框的聚焦行为。
希望这个解决方案能帮助您解决问题!如果还有其他疑问或需要进一步的帮助,请随时提问。