Nativescript-vue 获取有焦点的TextField

Posted 2023-04-14

【中文标题】Nativescript-vue 获取有焦点的TextField

【英文标题】：Nativescript-vue get TextField that has focus

【发布时间】：2020-05-03 07:20:39

【问题描述】：

我在 Nativescript-vue 应用程序中有 2 个文本字段。

<StackLayout col="0" row="1">
  <Label text="Unit Price Excl"></Label>
  <TextField v-model="newItem.unitPriceExcl" @textChange="calcPricing" keyboardType="number" hint="Unit Price Excl"></TextField>
</StackLayout>
<StackLayout col="1" row="1">
  <Label text="Unit Price Incl"></Label>
  <TextField v-model="newItem.unitPriceIncl" @textChange="calcPricing" keyboardType="number" hint="Unit Price Incl"></TextField>
</StackLayout>

从上面可以看出，每当两个文本框的文本发生变化时，我都会调用相同的方法。

...
methods: 
  calcPricing(args) 
    // get focus here
  

...

我想要的是，在 calcPricing 方法中，确定 2 个文本框中的哪一个当前具有焦点。

【问题讨论】：

您可以在文本字段上使用焦点/模糊事件来识别哪个处于活动状态。

@Manoj - 我意识到有一个焦点事件。您是否建议我存储某种任意变量，这是最后一个聚焦的文本字段，然后我可以在 textchange 事件中使用？

是的，我的建议是一样的。

【参考方案1】：

这是您尝试做的一个可能的实现

<TextField v-model="newItem.unitPriceExcl" @textChange="calcPricing" keyboardType="number" @focus="focus" @blur="blur" hint="Unit Price Excl"></TextField>
<TextField v-model="newItem.unitPriceIncl" @textChange="calcPricing" keyboardType="number" @focus="focus" @blur="blur" hint="Unit Price Incl"></TextField>
...
data: () => ( focusedElement: null )
methods: 
  focus( object ) 
    this.focusedElement = object;
  ,

  // You don't have to handle blur depending on your logic, but I find it more consistent
  blur( object ) 
    if (this.focusedElement !== object) return;
    this.focusedElement = null;
  

...

---

如果您不是真的想知道哪个元素具有焦点，而是想知道修改来自哪个元素。你可以这样做：

<TextField v-model="newItem.unitPriceExcl" @textChange="calcPricing('unitPriceExl')" keyboardType="number" hint="Unit Price Excl"></TextField>
...
methods: 
  calcPricing(name) 
    return (args) => 
      // Your logic goes here, you have access to name, and to args
    
  

...

---

旁注：您还可以使用一些本机方法来查找当前焦点所在的视图。不过要注意，它不是更快，也不推荐，主要思想是使用NS common api。

<TextField v-model="newItem.unitPriceExcl" @textChange="calcPricing" keyboardType="number" hint="Unit Price Excl" ref="unitPriceExcl"></TextField>
...
let UIResponder;
if (isios) 
  UIResponder = (UIResponder as any).extend(
      currentFirstResponder() 
         this.currentFirstResponder = null;
         UIApplication.sharedApplication.sendActionToFromForEvent('findFirstResponder', null, null, null);
         return this.currentFirstResponder;
      ,
      findFirstResponder(application: UIApplication) 
        this.currentFirstResponder = new WeakRef(self)
      
    , 
      exposedMethods: 
        currentFirstResponder:  returns: UIView, params: [ ] 
      
    )

...
methods: 
  getFocusedView() 
    if (isandroid) 
      const activity = application.android.foregroundActivity;
      if (activity) 
        return activity.getCurrentFocus()
      
     else if (isIOS) 
      return UIResponder.currentFirstResponder;
    

    return null;
  ,

  isFocused(object) 
    if (object.nativeView && object.nativeView.nativeView) return false;
    return this.getFocusedView() === object.nativeView.nativeView;
  ,

  calcPricing(args) 
    if (this.isFocused(this.$refs.unitPriceExcl)) 
        console.log('unitPriceExcl is selected');
    
  ,

...