<template>
<view class="content">
<image class="logo" src="/static/logo.png"></image>
<view class="text-area">
<text class="title">{{title}}</text>
<text @click="changeFocus" style="margin: 10px;">change textFocus</text>
</view>
<textarea style="width: 300px;height: 100px; background-color: #4CD964; margin-top: 20px;margin-bottom: 20px;" value="textarea区域" :focus="textFocus" placeholder=""></textarea>
<text @click="gotoT">去vue页面</text>
</view>
</template>
<script>
export default {
data() {
return {
title: 'Hello Nvue 页面',
textFocus: false
}
},
onLoad() {
uni.onKeyboardHeightChange(res => {
console.log('', res.height)
if (this.pageShow) { // 只有在页面显示的时候才执行操作
this.keyboardHeight = res.height;
}
});
},
methods: {
gotoT() {
uni.navigateTo({
url: '/pages/test/test'
})
},
changeFocus() {
this.textFocus = !this.textFocus;
console.log('changeFocus2---', this.textFocus);
}
}
}
</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>
w***@126.com
- 发布：2020-12-24 15:05
- 更新：2022-12-05 21:49
- 阅读：1753
产品分类： uniapp/App
PC开发环境操作系统： Mac
PC开发环境操作系统版本号： 10.5.2
HBuilderX类型： 正式
HBuilderX版本号： 2.9.8
手机系统： Android
手机系统版本号： Android 10
手机厂商： 华为
手机机型： mate20
页面类型： nvue
打包方式： 云端
项目创建方式： HBuilderX
示例代码：
操作步骤：
见bug描述和示例项目
见bug描述和示例项目
预期结果：
focus能如期生效
focus能如期生效
实际结果：
focus没有如期生效
focus没有如期生效
bug描述：
Nvue中使用textarea组件，其中的focus属性通过变量来动态变化。出现的问题如下：
- 组件初始化完成后直接通过按钮改变变量的布尔值，textarea并没有如期获取焦点并弹起键盘或失去焦点隐藏键盘的现象出现。
- 手动点击textarea组件区域，让其获取过焦点之后，之后再去通过按钮改变变量的布尔值，可如期获取失去焦点和显隐键盘。
- 组件初始化完成后，立即跳转到新页面去再返回当前页面，此时的textarea组件居然有焦点光标存在。
w***@126.com (作者)
记录好久了，啥时候能修复啊？
2021-01-19 15:39
3***@qq.com
回复 w***@126.com: 可以了吗这个
2021-11-24 17:04