已经上传了代码
Hi校园
- 发布：2021-03-22 11:38
- 更新：2021-03-25 23:09
- 阅读：1680
产品分类： uniapp/App
PC开发环境操作系统： Mac
PC开发环境操作系统版本号： macOS Big sur 11.2
HBuilderX类型： 正式
HBuilderX版本号： 3.0.7
手机系统： iOS
手机系统版本号： IOS 14
手机厂商： 苹果
手机机型： iPhone 11 pro max
页面类型： vue
打包方式： 离线
项目创建方式： HBuilderX
操作步骤：
预期结果：
input第一次聚焦时应该上推页面不会被键盘挡住。
input第一次聚焦时应该上推页面不会被键盘挡住。
实际结果：
第一次聚焦被挡住
第一次聚焦被挡住
bug描述：
在iOS端，如果使用第三方输入法，例如搜狗输入法会第一次聚焦时，Input框不会自动上推页面。会被键盘挡住，第二次聚焦时才会上推页面。目前测试了只有在苹果端使用第三方输入法才会出现。亲测搜狗输入法。
已经上传了例子
Hi校园 (作者)
自己写的临时解决方案
<template>
<view class="content">
<image class="logo" src="/static/logo.png"></image>
<view class="text-area">
<text class="title">{{title}}</text>
</view>
<input :adjust-position="isFirst" @keyboardheightchange="onKeyBoardHeightChange(res)" @focus="test()" :focus="isOpen" style="margin-top: 500rpx;background-color: #fc3e35;" />
</view>
</template>
<script>
export default {
data() {
return {
isOpen: true,
title: 'Hello',
isFirst: false //如果用户是第一次打开键盘就禁止输入框滚动，避免偶尔会引起页面闪动
}
},
onReady() {
},
onLoad() {
}
,
methods: {
test() {
if (this.isOpen !== false) {
uni.hideKeyboard(); //隐藏掉键盘
this.isFirst = true //接下来如果用户点击输入框就允许滚动
}
this.isOpen = false;
}
}
} </script>
<style>
.content {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.logo {
height: 200rpx;
width: 200rpx;
margin-top: 200rpx;
margin-left: auto;
margin-right: auto;
margin-bottom: 50rpx;
}
.text-area {
display: flex;
justify-content: center;
}
.title {
font-size: 36rpx;
color: #8f8f94;
} </style>
Hi校园 (作者)
<template>
<view class="content">
<image class="logo" src="/static/logo.png"></image>
<view class="text-area">
<text class="title">{{title}}</text>
</view>
<input :adjust-position="isFirst" @keyboardheightchange="onKeyBoardHeightChange(res)" @focus="test()" :focus="isOpen" style="margin-top: 500rpx;background-color: #fc3e35;" />
</view>
</template>
<script>
export default {
data() {
return {
isOpen: true,
title: 'Hello',
isFirst: false //如果用户是第一次打开键盘就禁止输入框滚动，避免偶尔会引起页面闪动
}
},
onReady() {
},
onLoad() {
}
,
methods: {
test() {
if (this.isOpen !== false) {
uni.hideKeyboard(); //隐藏掉键盘
this.isFirst = true //接下来如果用户点击输入框就允许滚动
}
this.isOpen = false;
}
}
}
</script>
<style>
.content {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.logo {
height: 200rpx;
width: 200rpx;
margin-top: 200rpx;
margin-left: auto;
margin-right: auto;
margin-bottom: 50rpx;
}
.text-area {
display: flex;
justify-content: center;
}
.title {
font-size: 36rpx;
color: #8f8f94;
}
</style>
