uni-app 抖音小程序中 input 框点击后软键盘弹出又缩回去

uni-app 抖音小程序中 input 框点击后软键盘弹出又缩回去

开发环境 版本号 项目创建方式
Windows win10 HBuilderX

操作步骤:

  • 点击input文本框

预期结果:

  • 弹出软键盘

实际结果:

  • 软键盘缩回

bug描述:

在苹果手机中抖音小程序点击输入框弹出软键盘后马上回缩回,无法正常使用。Andorid手机测试正常,字节开发工具测试也是正常只有苹果手机IOS新版手机测试出现问题。

补充说明:

  1. 如果使用@click.stop就可以阻止,键盘正常弹出使用,但是总不能在有input的地方都使用这种方法。
  2. 测试手机IOS系统是17.5.1(使用用17.3.1版本和15.6.1测试过是正常的)

WeChat_20240529114012.zip


更多关于uni-app 抖音小程序中 input 框点击后软键盘弹出又缩回去的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

如何使用@click.stop就可以阻止,正常使用,但是总不能在有input的地方都使用这种方法。

更多关于uni-app 抖音小程序中 input 框点击后软键盘弹出又缩回去的实战教程也可以访问 https://www.itying.com/category-93-b0.html


在 uni-app 开发抖音小程序时,遇到 input 框点击后软键盘弹出又立即缩回的问题,通常是由于以下几个原因引起的。以下是一些可能的解决方案:

1. 检查 input 框的 focus 状态

确保 input 框的 focus 状态没有被其他逻辑干扰。如果在 input 框获得焦点后,立即触发了某些逻辑(例如页面滚动、页面跳转等),可能会导致软键盘立即缩回。

<template>
  <input v-model="inputValue" [@focus](/user/focus)="onFocus" />
</template>

<script>
export default {
  data() {
    return {
      inputValue: ''
    };
  },
  methods: {
    onFocus() {
      // 确保这里没有立即触发其他逻辑
    }
  }
};
</script>

2. 避免页面滚动

在某些情况下,页面滚动会导致软键盘缩回。可以尝试在 input 框获得焦点时,禁止页面滚动。

<template>
  <input v-model="inputValue" [@focus](/user/focus)="onFocus" [@blur](/user/blur)="onBlur" />
</template>

<script>
export default {
  data() {
    return {
      inputValue: ''
    };
  },
  methods: {
    onFocus() {
      // 禁止页面滚动
      document.body.style.overflow = 'hidden';
    },
    onBlur() {
      // 恢复页面滚动
      document.body.style.overflow = 'auto';
    }
  }
};
</script>

3. 检查页面布局

确保 input 框的布局没有因为软键盘弹出而发生剧烈变化。如果软键盘弹出时,页面布局发生了较大的变化(例如 input 框被顶出可视区域),可能会导致软键盘缩回。

可以通过调整页面布局,确保 input 框在软键盘弹出时仍然可见。

4. 使用 adjust-position 属性

input 组件中,可以设置 adjust-position 属性为 false,这样在软键盘弹出时,页面不会自动调整位置,从而避免软键盘缩回。

<template>
  <input v-model="inputValue" :adjust-position="false" />
</template>

5. 抖音小程序特定问题

抖音小程序可能存在一些特定问题,建议查看抖音小程序的官方文档或社区,看看是否有类似问题的解决方案。

6. 调试与日志

如果以上方法都无法解决问题,可以通过添加日志来调试 input 框的 focusblur 事件,查看是否有其他逻辑干扰了软键盘的显示。

<template>
  <input v-model="inputValue" [@focus](/user/focus)="onFocus" [@blur](/user/blur)="onBlur" />
</template>

<script>
export default {
  data() {
    return {
      inputValue: ''
    };
  },
  methods: {
    onFocus() {
      console.log('input focused');
    },
    onBlur() {
      console.log('input blurred');
    }
  }
};
</script>
回到顶部