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

Posted 2023-04-14

【中文标题】Nativescript-vue 将光标设置在 TextInput RTL 的末尾

【英文标题】：Nativescript-vue Set the cursor at end of TextInput RTL

【发布时间】：2020-02-24 20:34:49

【问题描述】：

我正在尝试以编程方式将光标设置在文本字段的末尾，以模拟 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(/(\d1)(\d2)/, '$1,$2');
         else if (value.length === 4) 
            value = value.replace(/(\d2)(\d2)/, '$1,$2');
         else if (value.length === 5) 
            value = value.replace(/(\d3)(\d2)/, '$1,$2');
         else if (value.length === 6) 
            value = value.replace(/(\d1)(\d3)(\d2)/, '$1.$2,$3');
         else if (value.length === 7) 
            value = value.replace(/(\d2)(\d3)(\d2)/, '$1.$2,$3');
         else if (value.length === 8) 
            value = value.replace(/(\d3)(\d3)(\d2)/, '$1.$2,$3');
         else if (value.length === 9) 
            value = value.replace(/(\d1)(\d3)(\d3)(\d2)/, '$1.$2.$3,$4');
         else if (value.length === 10) 
            value = value.replace(/(\d2)(\d3)(\d3)(\d2)/, '$1.$2.$3,$4');
         else if (value.length === 11) 
            value = value.replace(/(\d3)(\d3)(\d3)(\d2)/, '$1.$2.$3,$4');
         else if (value.length === 12) 
            value = value.replace(/(\d1)(\d3)(\d3)(\d3)(\d2)/, '$1.$2.$3.$4,$5');
         else 
            value = value.replace(/(\d10,)(\d2)/, '$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)) 应该将光标设置为特定索引，即我输入的大小 - 1。

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

【问题讨论】：

你用什么设备测试它？你能分享一个可以重现问题的 Playground 示例吗？

【参考方案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(/(\d1)(\d2)/, '$1,$2');
     else if (value.length === 4) 
        value = value.replace(/(\d2)(\d2)/, '$1,$2');
     else if (value.length === 5) 
        value = value.replace(/(\d3)(\d2)/, '$1,$2');
     else if (value.length === 6) 
        value = value.replace(/(\d1)(\d3)(\d2)/, '$1.$2,$3');
     else if (value.length === 7) 
        value = value.replace(/(\d2)(\d3)(\d2)/, '$1.$2,$3');
     else if (value.length === 8) 
        value = value.replace(/(\d3)(\d3)(\d2)/, '$1.$2,$3');
     else if (value.length === 9) 
        value = value.replace(/(\d1)(\d3)(\d3)(\d2)/, '$1.$2.$3,$4');
     else if (value.length === 10) 
        value = value.replace(/(\d2)(\d3)(\d3)(\d2)/, '$1.$2.$3,$4');
     else if (value.length === 11) 
        value = value.replace(/(\d3)(\d3)(\d3)(\d2)/, '$1.$2.$3,$4');
     else if (value.length === 12) 
        value = value.replace(/(\d1)(\d3)(\d3)(\d3)(\d2)/, '$1.$2.$3.$4,$5');
     else 
        value = value.replace(/(\d10,)(\d2)/, '$1.$2');
    

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

这两个变化起到了作用。希望它可以帮助某人。