NativeScript Vue - 将焦点放在 TextField 上

Posted 2023-04-14

【中文标题】NativeScript Vue - 将焦点放在 TextField 上

【英文标题】：NativeScript Vue - set focus on TextField

【发布时间】：2020-07-04 12:11:31

【问题描述】：

我在 ios 13 上使用 NativeScript ("nativescript-vue": "^2.5.0") 测试

"tns-android": 
      "version": "6.0.0"
    ,
    "tns-ios": 
      "version": "6.0.1"
    

点击按钮时尝试将焦点设置在 TextField 上，目前看起来像这样

  <GridLayout dock="top" columns="auto,*,auto"  rows="auto,auto">
    <Label text.decode="&#xf2bd;" horizontalAlignment="left" row="0" rowSpan="2"  col="0" />
    <Label text="USER" horizontalAlignment="left" row="0" col="1" class="m-l-3" />
    <Label :text="userEditBtnText"  @tap="userEditTap()"  horizontalAlignment="right" row="0" rowSpan="2" col="2" class="btnEdit"/>
    <TextField ref="userid" text="@username" :editable="userEdit" horizontalAlignment="left" row="1" col="1" class="m-l-3"/>
  </GridLayout>           

以及@tap="userEditTap()" 的代码

userEditTap()
  this.userEdit = true;
  this.userEditBtnText="SAVE";
  this.$refs["userid"].focus();      

我的控制台错误：

javascript 错误：文件： node_modules/@nativescript/core/application/application.ios.js:312:26 JS ERROR 错误：NativeScript 遇到致命错误：TypeError： this.$refs["userid"].focus 不是函数。 （在 'this.$refs["userid"].focus()', 'this.$refs["userid"].focus' 是 未定义）

感谢任何意见！

【参考方案1】：

当您通过 ref 访问时，您正在访问 Vue 元素，您必须调用 .nativeView 才能访问实际的 TextField。

应该是，

this.$refs["userid"].nativeView.focus();      

【讨论】：

谢谢，在标签上点击两次才能获得焦点，但我现在可以忍受这个！关于可能导致这种行为的任何见解？我试过this.$refs["userid"].nativeView.focus(); this.$forceUpdate();，但似乎没有效果。

我不确定，如果您可以共享 Playground 示例，那么调试起来很容易。

当然，检查一下play.nativescript.org/?template=play-vue&id=Pnlbwc 如果您在该字段变为可编辑但未聚焦时点击编辑，当您再次点击它时，它应该聚焦

您粘贴了链接吗？还要确认您在哪个平台和设备上运行测试。

这是因为您将 userEdit 标志绑定到 TextField 的 editable 属性，该属性最初设置为 false。在您第一次单击时，您切换标志，但更改检测周期在此之后运行，并且需要一段时间才能编辑文本字段。因此，焦点第一次不起作用。等待可编辑属性更改（使用属性更改侦听器）或更新可从 JS 编辑的文本字段，而不是模型绑定，这样更改将立即生效并立即响应焦点。