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

Question

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

我的 TextField 组件：

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

我设置了一个可以执行 "mask" 魔法的手表：

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})/, ',');
        } else if (value.length === 4) {
            value = value.replace(/(\d{2})(\d{2})/, ',');
        } else if (value.length === 5) {
            value = value.replace(/(\d{3})(\d{2})/, ',');
        } else if (value.length === 6) {
            value = value.replace(/(\d{1})(\d{3})(\d{2})/, '.,');
        } else if (value.length === 7) {
            value = value.replace(/(\d{2})(\d{3})(\d{2})/, '.,');
        } else if (value.length === 8) {
            value = value.replace(/(\d{3})(\d{3})(\d{2})/, '.,');
        } else if (value.length === 9) {
            value = value.replace(/(\d{1})(\d{3})(\d{3})(\d{2})/, '..,');
        } else if (value.length === 10) {
            value = value.replace(/(\d{2})(\d{3})(\d{3})(\d{2})/, '..,');
        } else if (value.length === 11) {
            value = value.replace(/(\d{3})(\d{3})(\d{3})(\d{2})/, '..,');
        } else if (value.length === 12) {
            value = value.replace(/(\d{1})(\d{3})(\d{3})(\d{3})(\d{2})/, '...,');
        } else {
            value = value.replace(/(\d{10,})(\d{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 returns 大于或等于 0 的整数值。但是下一行 (this.$refs.value_field.nativeView.android.setSelection(this.value.length - 1)) 应该将光标设置为特定索引，这是我的大小输入 - 1.

但它总是转到我的 TextField 的 0 位置。我错过了什么？

Answer 1

嗯，找到解决办法了。做了2个把戏。

从监视中移出并设置为@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})/, ',');
    } else if (value.length === 4) {
        value = value.replace(/(\d{2})(\d{2})/, ',');
    } else if (value.length === 5) {
        value = value.replace(/(\d{3})(\d{2})/, ',');
    } else if (value.length === 6) {
        value = value.replace(/(\d{1})(\d{3})(\d{2})/, '.,');
    } else if (value.length === 7) {
        value = value.replace(/(\d{2})(\d{3})(\d{2})/, '.,');
    } else if (value.length === 8) {
        value = value.replace(/(\d{3})(\d{3})(\d{2})/, '.,');
    } else if (value.length === 9) {
        value = value.replace(/(\d{1})(\d{3})(\d{3})(\d{2})/, '..,');
    } else if (value.length === 10) {
        value = value.replace(/(\d{2})(\d{3})(\d{3})(\d{2})/, '..,');
    } else if (value.length === 11) {
        value = value.replace(/(\d{3})(\d{3})(\d{3})(\d{2})/, '..,');
    } else if (value.length === 12) {
        value = value.replace(/(\d{1})(\d{3})(\d{3})(\d{3})(\d{2})/, '...,');
    } else {
        value = value.replace(/(\d{10,})(\d{2})/, '.');
    }

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

这两项更改起到了作用。希望对大家有帮助。

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

Nativescript-vue Set the cursor at end of TextInput RTL

android

nativescript

nativescript-vue