uniapp 微信小程序 textarea 光标位置问题
·
目前需求:发布帖子时可以选择不同模板,模板会根据内容定位光标的位置。
达到效果:点击模版显示内容并设置光标位置,切换模版后键盘隐藏->更新内容->键盘显示->光标设置。
平台:目前在微信小程序端测试正常
//----html
<textarea v-model="content" @blur="onBlur" :focus="focus" :cursor="curCursor" auto-height maxlength="500" @input="bingContentInput" placeholder="请输入你得内容"></textarea>
//----js vue
//模板列表
const templates = ref([])
//当前光标
const curCursor = ref(0)
//当前焦点
const focus = ref(false)
//失去焦点重置
const onBlur = (e) => {
focus.value = false
curCursor.value = 0
}
//切换模版方法
const useTemplate = (idx) => {
if (templates.value[idx].content) { //是否有模版内容
//使键盘隐藏
focus.value = false
//模版内容
content.value = templates.value[idx].content
//延时后设置焦点弹出键盘
setTimeout(()=>{
nextTick(()=>{
curCursor.value = templates.value[idx].cursorPosition
focus.value = true
})
}, 600) //时间可动态调整,键盘的隐藏和现实动画在300,但是需要设置大一点
}
}
更多推荐
所有评论(0)