uniapp项目在微信小程序的弹窗中的textarea的focus属性不能获取到焦点，而H5却可以。

绪風

已于 2024-10-13 21:42:27 修改

阅读量872

点赞数 4

CC 4.0 BY-SA版权

文章标签： uni-app 微信小程序小程序

于 2024-10-13 21:40:04 首次发布

本文链接：https://blog.youkuaiyun.com/qq_59835987/article/details/142904868

有个执行顺序的问题。将textarea中的focus属性绑定一个ref属性isFocus(默认值为false)，然后在打开弹窗的时候利用nextTick方法，将isFocus属性变为true即可完成在小程序的弹窗中的textarea中光标的聚焦。最后在失去焦点的时候，再将isFocus再设为false

解决代码如下：

//光标聚焦
	const isFocus = ref(false)
	
	//打开弹出层
	const clickComment = () => { 
		commentPopup.value.open();
		nextTick(()=>{
			isFocus.value = true;
		})
	}

弹出层代码：

<!-- 底部评论弹窗层 -->
		<uni-popup ref="commentPopup" type="bottom">
			<view class="commentPopup" :style="{bottom:PopupBottom + 'px'}">
				<view class="commentPopup-top">
					<uni-rate v-model="userScore" @change="changeScore"/>
					<view class="player">JackLove · 第一局</view>
				</view>

				<view class="commentPopup-comment">
				
					<textarea ref="textareaRef" class="text" v-model="userComment" placeholder="请输入评论..."
					:show-confirm-bar="false" :fixed="true" @keyboardheightchange="changeKBHeight" 
					:adjust-position="false" @input="changeContent" :maxlength="-1" :focus="isFocus"
					@blur="onblur"   @focus="handleFocus">
					</textarea>
					
				</view>

				<view class="commentPopup-bottom">
					<view class="comment-emoji">
						<image class="emoji" src="../../static/images/Emoji.png"></image>
					</view>
					<view class="submit" @click="submitComment" :class="{inputContent:hasContent}">发布</view>
				</view>
			</view>
		</uni-popup>