Move cursor to end of textfield


#1

Following up on this issue, does anyone know of a way to move the cursor to the end of a textfield on Android (on iOS the cursor is automatically set to the end of the value upon change)? I couldn’t find any relevant method/property in the text-field API reference.

Thanks!


#2

Hi @abhayastudios

Android inputs also move their cursor automatically to the end upon changes, I reckon. Well, supposing you have a string and you are appending characters to its end, the cursor will remain there.

What could happen, and this had happened to me, is you set a length limit to your TextField, say 10 chars, and when your input reaches its limit the cursor goes back to the beginning. I think a solution to this would be accessing directly the android variable provided by the TextField instance and using a native method to set the cursor.

I’ve found this showing how to set the cursor to the end of an EditText, but I really don’t know whether this will help or not since I haven’t tested.

Would you give a try? Cheers


#3

@rcluan thanks for your reply. I guess you are right as what I understand from this the setSelection(Spannable text, int index) should position the cursor at position index.

What I don’t understand however is how to reference it from NativeScript. I tried to do something below but then it complains that the property ‘setSelection’ does not exist on type ‘TextField’ (which makes sense because it is not an Android EditText type but a NativeScript TextField):

let phoneField : TextField = <TextField> this.page.getViewById("phoneField");
phoneField.setSelection(this.phoneNumber,this.phoneNumber.length);

So I figured I would somehow need to get a reference to the Android EditText and tried something like this:

let phoneField : TextField = <TextField> this.page.getViewById("phoneField");
android.text.Selection.setSelection(this.phoneNumber,this.phoneNumber.length);

However here the android.textSelection should be a reference to phoneField. Any idea how I can make that happen?

Thanks!


#4

in case of of ts/js without ng then
phoneField.android.setSelection(…)

in case of ng2 its I think
phoneField.nativeElement.android.setSelection(…)


#5

@markosko you are right :slight_smile: I was just about to write here that I solved it with the help of @triniwiz.

I ended up doing this:

XML

<TextField #phoneField [(ngModel)]="phoneNumber" (textChange)="handleLeadingZero($event)"></TextField>

TypeScript

import {Component,ElementRef,ViewChild} from '@angular/core';

@ViewChild('phoneField') phoneField: ElementRef;

  public handleLeadingZero(event) {
    this.phoneNumber=event.value.replace(/^0/,'(0)');
    if (isAndroid) {
      setTimeout(() => {
        this.phoneField.nativeElement.focus();
        android.text.Selection.setSelection(
          this.phoneField.nativeElement.android.getText(),
          this.phoneField.nativeElement.android.length()
        );
      },0);
    }
  }

#6

Why not directly use function for index :smiley:

this.phoneField.nativeElement.android.setSelection(
        this.phoneField.nativeElement.text.length //maybe this would be enough
        //this.phoneField.nativeElement.android.length()
);

#7

works great. Thanks!!!