junhun
junhun
  • 发布:2019-12-17 16:07
  • 更新:2023-08-04 16:14
  • 阅读:2507

uni-app如何设置input的焦点在最后一位

分类:uni-app

请教一下各位大佬,uni-app中点击input的时候让其焦点设置在最后一位,怎么搞?加急

2019-12-17 16:07 负责人:无 分享
已邀请:
junhun

junhun (作者) - 90后

跪求大佬解答。。。

  • junhun (作者)

    我试了将input的 :curser=“text.length”和 :curser="4"都没用

    2019-12-19 14:08

无所谓001

无所谓001 - 程序员

请问,这个问题解决了吗?

陶哥

陶哥 - 一个大帅哥

直接用v-if重新渲染就好了,v-model绑定好数据。每次点击就重新获取焦点就可以一直最后一位

p***@163.com

p***@163.com

解决了吗

piaoyi_UI

piaoyi_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>
  • p***@163.com

    能通过获取焦点事件来触发吗?

    使用作业 没有按钮点击的

    2023-08-04 15:54

  • p***@163.com

    用户是手动点击文本框的

    2023-08-04 15:55

喜欢技术的前端

喜欢技术的前端 - 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>

要回复问题请先登录注册