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

有个执行顺序的问题。将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>

### 解决 UniApp 微信小程序 Textarea 光标自动定位到最后的问题 对于 UniApp微信小程序 `textarea` 的光标自动定位到最后的问题,可以通过设置组件属性以及调用特定 API 来实现。具体方法如下: #### 方法一:通过 `cursor-spacing` 属性调整 在页面的 WXML 文件中定义 `textarea` 组件时,增加 `cursor-spacing` 属性,并赋予较大的数值来防止软键盘遮挡输入内容的同时也间接影响到了光标的最终位置。 ```html <template> <view class="container"> <!-- 设置较大间距 --> <textarea v-model="content" :cursor-spacing="900" /> </view> </template> <script> export default { data() { return { content: '' } }, } </script> ``` 此方式适用于希望快速解决问题而不深入探究内部机制的情况[^1]。 #### 方法二:手动控制光标位置 如果需要更精确地控制光标的位置,则可以在每次编辑结束后主动将其移动到文本结尾处。这通常涉及到监听用户的输入事件,在适当的时候调用 `setSelectionRange()` 或者使用框架提供的接口如 `uni.createSelectorQuery()` 获取当前节点的信息并重新设定选区范围。 ```javascript // 假设已经绑定了 input 事件处理器 methods: { handleInput(event) { const value = event.detail.value; this.$nextTick(() => { // 确保 DOM 更新完成 uni.createSelectorQuery().select('.custom-textarea').boundingClientRect((rect) => { if (rect) { let length = value.length; // 使用 setSelectionRange 如果支持的话 try { var el = document.activeElement; if(el.setSelectionRange){ setTimeout(function(){ el.setSelectionRange(length, length); }, 0); } else{ console.log('浏览器不支持该API'); } } catch(e){console.error(e)} // 对于某些环境可能还需要额外操作... } }).exec(); }); } } ``` 需要注意的是上述代码片段中的 `.custom-textarea` 需要替换为实际的选择器名称;另外由于不同平台间可能存在差异,因此建议测试确认效果再部署生产环境中[^2]。 #### 方法三:利用 focus 和 blur 事件组合 另一种思路是在失去焦点(`blur`)之后再次获得焦点(`focus`)之前先保存最后一次编辑的状态,当重新获取焦点时恢复之前的光标状态。这种方法特别适合处理复杂场景下可能出现的各种异常情况。 ```html <textarea @blur="saveCursorPosition" @focus="restoreCursorPosition"></textarea> ``` ```javascript data() { return { lastCursorPos: null, textValue: '', }; }, methods: { saveCursorPosition(e) { this.lastCursorPos = e.target.selectionEnd || e.detail.cursor; // 根据实际情况选取合适的属性名 }, restoreCursorPosition() { if (!this.lastCursorPos && typeof this.lastCursorPos !== 'number') return; setTimeout(() => { const textareaElm = /* 获取目标元素 */; textareaElm.setSelectionRange(this.lastCursorPos, this.lastCursorPos); // 将光标重置回上次离开的地方 }, 0); } } ``` 以上三种策略可以根据项目需求灵活选用或混合应用以达到最佳用户体验[^3]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值