将光标移动到TextField的末尾 - NativeScript

Question

我希望用户点击文本框后，文本框能自动指向文本的末尾。以前使用setSelection可以实现，但出于某种原因，它不再起作用。现在光标会指向用户点击的位置。

HTML:

<TextField text="the cursor should point at the end when clicked" (focus)="onFocus($event.object)"> </TextField>

TS：

public onFocus(textfield): void {
   textfield.android.setSelection(textfield.text.length)
}

如果我将其包裹在一个超时函数中，它会工作，但光标移动之前会有一闪而过的情况，这让我不太满意。我还制作了一个播放演示。

提前感谢您的帮助！

- Felipe Centeno

Answer 1

好的，我找到了一个解决方案。虽然有点 hack，但对我来说很管用。与 setTimeout 的主要区别在于，在移动光标之前不会出现“闪烁”。

好的，这是我的解决方案：我在文本字段内部使用条件性 css 类，取决于文本字段是否聚焦。这会导致生命周期钩子在文本字段准备好后再运行一次（至少我认为是这样）。

现在这是我的代码： HTML：

<TextField [class.default-padding]="isFocused" text="the cursor should point at the end when clicked" (focus)="onFocus($event.object)" (blur)="onBlur()"> </TextField>

CSS：

.default-padding {
/* This is just a dummy value. You can use any other padding or margin or
 anything that will cause the hooks to re-render*/
padding-right: 0;

}

TS：

private isFocused = false

public onFocus(textfield): void {
    this.isFocused = true
    textfield.android.setSelection(textfield.text.length)
}

public onBlur(): void {
    this.isFocused = false
}

这是我的更新后的游乐场示例。

- Felipe Centeno

---

这对我来说可行，但我很好奇是否有更好的方法来做到这一点？在我的情况下，我已经需要一个条件性的CSS，所以我只需要移动它。尽管如此，我想知道一个更一般的答案，而不是一个hack。 - Felipe Centeno

Answer 2

看起来它按预期工作。请记住，在Android上，焦点是指光标放置在TextField上的时候。如果您按返回按钮隐藏键盘，然后单击TextField上的任何位置再次显示键盘，那么这将不会再次触发焦点事件。

当我点击TextField时，它会将光标定位到TextField的末尾，如果我再次点击同一个TextField，则不会。但是，如果我点击第二个TextField，那么它应该像预期的那样工作，因为焦点现在从第一个TextField转移到第二个TextField。

如果您仍然有问题，请分享您的设备操作系统版本和可能显示问题的GIF。

- Manoj

---

我在游乐场示例中使用了setTimeOut。它确实可以工作，但在移动之前会闪烁。 - Felipe Centeno

我认为你无法避免超时问题，这是Android本身的一个问题。当你聚焦在textfield上时，它的布局会得到更新，并且设置选择应该等待这些更改完成。如果你对盲目超时感到不舒服，你可以使用这里推荐的post方法。 - Manoj

我认为布局没有更新，因为在焦点后layoutChange不会触发。不过我找到了一个hacky的解决方案，所以还是谢谢你的帮助。 - Felipe Centeno