Nativescript-vue Установить курсор в конце TextInput RTL - PullRequest
Новая
       24

Nativescript-vue Установить курсор в конце TextInput RTL

0 голосов
/ 29 октября 2019

Я пытаюсь программно установить курсор в конце моего текстового поля, чтобы имитировать ввод текста 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)), которая должна установить курсор на конкретный индекс, который является размером моего ввода - 1.

Но он всегда идет в позицию 0 моего TextField,Чего мне не хватает?

1 Ответ

0 голосов
/ 05 ноября 2019

Ну, нашел решение. Сделано 2 трюка.

  1. Выйти из часов и установить событие @textChange
  2. Добавить пробел после конца ввода, чтобы можно было установить курсор за последним числом

Мой компонент 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);   
    }
}

Эти два изменения сделали свое дело. Надеюсь, это кому-нибудь поможет.

...