Question

我试图以编程方式将光标设置在文本字段的末尾，以模拟RTL文本输入。

我的TextField组件：

<TextField ref="value_field" v-model="value" class="input input-border" keyboardType="number" />

我设置了一块具有“面具”魔术功能的手表：

value(val){
    let v = parseFloat(val.replace("R$ ", '').replace(/\./g, '').replace(',', '.'));
    this.value_to_btc = (v / parseFloat(appSettings.getString('ticker'))).formatMoney('BTC ',6,'.',',',0);
    if (val && this.check_value) {
        let value = val;

        value = value.replace(/\D/g, '');

        if (value.length === 3) {
            value = value.replace(/(\d{1})(\d{2})/, '$1,$2');
        } else if (value.length === 4) {
            value = value.replace(/(\d{2})(\d{2})/, '$1,$2');
        } else if (value.length === 5) {
            value = value.replace(/(\d{3})(\d{2})/, '$1,$2');
        } else if (value.length === 6) {
            value = value.replace(/(\d{1})(\d{3})(\d{2})/, '$1.$2,$3');
        } else if (value.length === 7) {
            value = value.replace(/(\d{2})(\d{3})(\d{2})/, '$1.$2,$3');
        } else if (value.length === 8) {
            value = value.replace(/(\d{3})(\d{3})(\d{2})/, '$1.$2,$3');
        } else if (value.length === 9) {
            value = value.replace(/(\d{1})(\d{3})(\d{3})(\d{2})/, '$1.$2.$3,$4');
        } else if (value.length === 10) {
            value = value.replace(/(\d{2})(\d{3})(\d{3})(\d{2})/, '$1.$2.$3,$4');
        } else if (value.length === 11) {
            value = value.replace(/(\d{3})(\d{3})(\d{3})(\d{2})/, '$1.$2.$3,$4');
        } else if (value.length === 12) {
            value = value.replace(/(\d{1})(\d{3})(\d{3})(\d{3})(\d{2})/, '$1.$2.$3.$4,$5');
        } else {
            value = value.replace(/(\d{10,})(\d{2})/, '$1.$2');
        }

        this.value = "R$ " + value;
    }
    this.check_value = !this.check_value; // This is to prevent the watch callback
    if (isAndroid) {
        console.log(this.value.length - 1);
        this.$refs.value_field.nativeView.android.setSelection(this.value.length - 1)
    }
}

问题应该在此块中：

if (isAndroid) {
    console.log(this.value.length - 1);
    this.$refs.value_field.nativeView.android.setSelection(this.value.length - 1)
}

this.value.length返回大于或等于0的整数值。但是下一行（this.$refs.value_field.nativeView.android.setSelection(this.value.length - 1)）应该将光标设置为especific索引，即我输入的大小-1。

但是它总是转到我的TextField的0位置。我想念什么？

Answer 1

好吧，找到了解决方案。做过两把戏。

从监视中移出并设置为@textChange事件
在输入结束后添加一个空格只是为了将光标设置在最后一个数字的后面

我的TextField组件：

<TextField ref="value_field" v-model="value" class="input input-border" keyboardType="number" @textChange="setToEnd($event)" />

我的新方法setToEnd方法：

setToEnd: function(event){
    let v = parseFloat(this.value.replace("R$ ", '').replace(/\./g, '').replace(',', '.'));
    this.value_to_btc = (v / parseFloat(appSettings.getString('ticker'))).formatMoney('BTC ',6,'.',',',0);
    let value = this.value;

    value = value.replace(/\D/g, '');
    if (value.length === 3) {
        value = value.replace(/(\d{1})(\d{2})/, '$1,$2');
    } else if (value.length === 4) {
        value = value.replace(/(\d{2})(\d{2})/, '$1,$2');
    } else if (value.length === 5) {
        value = value.replace(/(\d{3})(\d{2})/, '$1,$2');
    } else if (value.length === 6) {
        value = value.replace(/(\d{1})(\d{3})(\d{2})/, '$1.$2,$3');
    } else if (value.length === 7) {
        value = value.replace(/(\d{2})(\d{3})(\d{2})/, '$1.$2,$3');
    } else if (value.length === 8) {
        value = value.replace(/(\d{3})(\d{3})(\d{2})/, '$1.$2,$3');
    } else if (value.length === 9) {
        value = value.replace(/(\d{1})(\d{3})(\d{3})(\d{2})/, '$1.$2.$3,$4');
    } else if (value.length === 10) {
        value = value.replace(/(\d{2})(\d{3})(\d{3})(\d{2})/, '$1.$2.$3,$4');
    } else if (value.length === 11) {
        value = value.replace(/(\d{3})(\d{3})(\d{3})(\d{2})/, '$1.$2.$3,$4');
    } else if (value.length === 12) {
        value = value.replace(/(\d{1})(\d{3})(\d{3})(\d{3})(\d{2})/, '$1.$2.$3.$4,$5');
    } else {
        value = value.replace(/(\d{10,})(\d{2})/, '$1.$2');
    }

    this.value = "R$ " + value + " " ;
    if (isAndroid) {
        this.$refs.value_field.nativeView.android.setSelection(this.value.length - 1);   
    }
}

这两个更改成功了。希望对别人有帮助。

Nativescript-vue将光标设置在TextInput RTL的末尾

1 个答案: