uni-app 云打包后 input 弹出软键盘无光标问题,本地调试时 input focus 有光标。导致 PDA 客户扫码失败。

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

uni-app 云打包后 input 弹出软键盘无光标问题,本地调试时 input focus 有光标。导致 PDA 客户扫码失败。

操作步骤:

  • 点击扫码,弹出窗体

预期结果:

  • 弹出窗体的文本框应该默认有光标

实际结果:

  • 文本框弹出软键盘,没有光标

bug描述:

本地调试input focus会触发光标,云打包之后,input会弹出软键盘没有光标。导致使用PDA客户扫码时,扫不出来,要点击一下文本框才行。用过历史老版本3.5.3,3.6.4和3.7.11等多个版本皆无效,所以应该是云打包存在的问题。 已经困扰我好几个版本,也没有解决的问题,客户已经在要放弃合作的边缘了,很急

图片

Image 1 Image 2


6 回复

我有上传代码附件,不知道邀请回答的技术人员是不是能够看到


持续扫码,这个功能很多开发者都做过,网上可以搜索到很多帖子。如果非常着急,也可以联系service@dcloud.io寻求付费技术支持。

<template> <view class="container"> <view class="uni-textarea"> <view class="uni-title">输入信息</view> <view class="uni-textarea"> <textarea v-model="FormNo" :focus="focusState" confirm-type="search" @confirm="doSearch"/> </view> </view> <tui-tabbar :tabBar="tabBar" :isFixed="true" :current="current" @click="tabbarSwitch"></tui-tabbar> </view> </template> <script> export default { data() { return { tabBar: [{ "pagePath": "/pages/tabbar/index/index", "text": "清空", "iconPath": "/static/images/tabbar/clear.png", "selectedIconPath": "/static/images/tabbar/clear.png" }, { "pagePath": "/pages/tabbar/extend/extend", "text": "确认", "iconPath": "/static/images/tabbar/ok.png", "selectedIconPath": "/static/images/tabbar/ok.png" } ], current: 0, FormNo: '', focusState:false } }, onShow() { this.firstChange(); }, mounted() { this.focusState = false; this.$nextTick(()=>{ this.focusState = true; }) }, methods: { firstChange() { // this.focusState = false; // 每次都要初始化 focus 属性 // setTimeout(() => { // this.focusState = true; // this.secondFocus 是第二个文本框的 focus 属性。 // },100) }, //键盘点击回车 doSearch(){ if(this.FormNo == "") { return; } //显示搜索结果 uni.setStorageSync('InputFormNo', this.FormNo); // uni.$emit('input', "文本"); // uni.navigateBack({}); this.$api.prePage().InputScanOver(); uni.navigateBack({}); }, tabbarSwitch(e) { //获取登录状态,此处默认未登录 this.current = e.index; //console.log(this.current); switch (this.current) { case 0: //清空 this.FormNo = ''; break; case 1: //确认 this.doSearch(); break; } } } } </script> <style> </style>

代码分享,他纯用focus 不行的,要用事件触发才行。

我也是无语了,又不行了。这云打包到底在改什么

在 uni-app 中,云打包后 input 弹出软键盘无光标的问题,可能是由于某些平台或设备的兼容性问题导致的。以下是一些可能的解决方案和排查步骤:

1. 检查 input 组件的属性和样式

确保 input 组件的属性和样式没有影响到光标的显示。例如,检查 focus 属性是否正确设置,以及是否有样式覆盖了光标的显示。

<input type="text" v-model="inputValue" focus />

2. 使用 uni.showKeyboard 手动控制软键盘

在某些情况下,手动控制软键盘的显示可能会解决问题。你可以尝试在 input 获得焦点时,手动调用 uni.showKeyboard 来显示软键盘。

methods: {
  onInputFocus() {
    uni.showKeyboard({
      defaultValue: '',
      maxLength: 100,
      multiple: false,
      confirmHold: false,
      confirmType: 'done',
      success: (res) => {
        console.log('showKeyboard success', res);
      },
      fail: (err) => {
        console.error('showKeyboard fail', err);
      }
    });
  }
}

3. 检查 PDA 设备的兼容性

PDA 设备可能有特定的兼容性问题。你可以尝试在 PDA 设备上使用其他应用或浏览器测试 input 组件的表现,看看是否是设备本身的问题。

4. 使用 textarea 替代 input

在某些情况下,使用 textarea 组件可能会解决光标不显示的问题。textarea 组件在某些设备上的表现可能更稳定。

<textarea v-model="inputValue" focus />

5. 更新 uni-app 版本

确保你使用的是最新版本的 uni-app。旧版本可能存在一些已知的 bug,更新到最新版本可能会解决问题。

6. 检查云打包配置

在云打包时,检查是否有特殊的配置可能导致问题。例如,某些插件或配置可能会影响 input 组件的表现。

7. 使用原生开发

如果以上方法都无法解决问题,可以考虑使用原生开发的方式来实现 input 组件的功能。虽然这会增加开发成本,但可以确保在特定设备上的兼容性。

8. 联系 uni-app 官方支持

如果问题依然无法解决,可以联系 uni-app 官方支持团队,提供详细的设备信息和问题描述,寻求进一步的帮助。

9. 使用 focus 事件监听

确保在 input 获得焦点时,光标能够正确显示。你可以在 focus 事件中做一些调试,看看是否有其他因素影响了光标的显示。

methods: {
  onInputFocus() {
    console.log('Input focused');
    // 在这里可以做一些调试或处理
  }
}
回到顶部
AI 助手
你好,我是IT营的 AI 助手
您可以尝试点击下方的快捷入口开启体验!