请教一下各位大佬,uni-app中点击input的时候让其焦点设置在最后一位,怎么搞?加急
- 发布:2019-12-17 16:07
- 更新:2023-08-04 16:14
- 阅读:2980
Diligent_UI - 【插件开发】【专治疑难杂症】【多款插件已上架:https://ext.dcloud.net.cn/publisher?id=193663(微信搜索飘逸科技UI小程序直接体验)】【骗子请绕道】问题咨询请加QQ群:120594820,代表作灵感实用工具小程序
点击input是点击哪里,光标就在哪里
喜欢技术的前端 - QQ---445849201
可供参考
<template>
<view>
<input type="text" class="input" v-model="inputVal" placeholder="请输入" :focus="focus" :cursor="cursor">
<button @click="cursorStart">开始位置</button>
<button @click="cursorFun">结束位置</button>
</view>
</template>
<script>
export default {
data() {
return {
cursor: 0,
focus: false,
inputVal: ''
}
},
onLoad() {
uni.onKeyboardHeightChange(res => {
if (res.height == 0) { //键盘隐藏
this.focus = false
}
})
},
methods: {
cursorFun() { //结束
this.cursorAction(this.inputVal.length)
},
cursorStart() { //开始
this.cursorAction(0)
},
cursorAction(num) { //获得焦点,设置位置
console.log(num)
this.focus = true
this.cursor = num
}
}
}
</script>
<style>
.input {
padding: 30rpx;
margin-bottom: 50rpx;
}
</style>
喜欢技术的前端 - QQ---445849201
稍加改造,感觉这个需求有些矛盾,
<template>
<view>
<input type="text" class="input" v-model="inputVal" placeholder="请输入" :focus="focus" :cursor="cursor" :disabled="disabled"
@tap="cursorStart">
</view>
</template>
<script>
export default {
data() {
return {
cursor: 0,
focus: false,
inputVal: '',
disabled:true
}
},
onLoad() {
uni.onKeyboardHeightChange(res => {
if (res.height == 0) { //键盘隐藏
this.focus = false
this.disabled = true
}
})
},
methods: {
cursorFun() { //结束
this.cursorAction(this.inputVal.length)
},
cursorStart() { //开始
this.cursorAction(0)
},
cursorAction(num) { //获得焦点,设置位置
if(!this.disabled){
return
}
this.disabled = false
this.$nextTick(() => {
this.focus = true
this.cursor = num
})
}
}
}
</script>
<style>
.input {
padding: 30rpx;
margin-bottom: 50rpx;
}
</style>
junhun (作者)
我试了将input的 :curser=“text.length”和 :curser="4"都没用
2019-12-19 14:08