Question

现在看来似乎不可能了，我尝试了一些疯狂的事情，例如：

(this.refs.vtextarea as any).textarea.focus()

((this.refs.vtextarea as Vue).$el as HTMLElement).focus()

等...

的Javascript源对我来说是很难读，但是它是可悲的不得不做这样的...

这是一些基本的东西，还是我缺少明显的东西？

PS：好吧，我在层次结构中的某个地方看到了textarea元素……也许我可以通过一些基本的dom子元素访问方式来访问它……但这就像编写我一生中最糟糕的代码一样。

Answer 1

即使集中在$nextTick上，Vuetify也不总是能使输入聚焦。

这是我们对input和textarea进行通用处理的方式。实际上，我们将此代码与ref设置为form一起使用，以便聚焦第一个可见的textarea或input。但是，您可以仅定位适合您需求的小部件。

mounted() {
  this.$nextTick(() => {
          const theElement = this.$refs.myRef         
          const input = theElement.querySelector('input:not([type=hidden]),textarea:not([type=hidden])')
          if (input) {
            setTimeout(() => {
              input.focus()
            }, 0)
          }
  });
}

$nextTick和setTimeout的延迟通常可以忽略不计，并且经常需要这样做，它将为您节省一次又一次的时间。

您也不必排除type=hidden，但这不会造成伤害。

如果ref不是HTMLElement，而是VueComponent，则可能需要使用this.$refs.myRef.$el来获取DOM元素。

Answer 2

<template>
   <v-text-area
      ref="myTextArea"
   />
</template>

<script>
   ...
   created () {
      this.$refs["myTextArea"].$refs.textarea.focus()
   }
</script>

我在文本字段中这样做。我认为它应该以相同的方式工作。

Answer 3

编辑为新答案：https://codepen.io/cby016/pen/eQXoBo

尝试在引用后添加$ el。像这样：

this.$nextTick(() => this.$refs.cancelTestDialog.$el.focus())

还要确保将“ ref”定义为组件上的属性。

Vue引用通过在组件上添加ref="<customName>"属性来工作，您可以使用this。$ refs ..

进行选择。

OLD：在绘制文本区域之前，您需要稍等片刻。你可以   使用诸如setTimeout之类的技巧或使用此Vue函数：

this.$nextTick(() => { this.$refs.<name>.focus() })

Nexttick与setTimeout基本相同

Answer 4

我的解决方案现在是这样：

(this.$refs.<name>.$el.childNodes[0].childNodes[0].childNodes[0].childNodes[0] as HTMLElement).focus()

但是正如我在以这种方式尝试之前所说的那样，它是如此丑陋。但是..工程。

Answer 5

为我工作

setTimeout(() => {
   this.$refs.textNote.$refs.input.focus()
})

Answer 6

我让我可以与此一起工作：

mounted() {
    this.$nextTick(() => {
      setTimeout(() => {
        this.$refs.descriptionDescription.$refs.input.focus()
      })
    })
  },

@Thomas和@Steven Spungin的代码组合

Answer 7

这是普通的JavaScript，而不是TypeScript，但这对我有用：

<v-textarea ref="entry"></v-textarea>


<script>
export default {
    mounted() {
        this.$refs["entry"].focus();
    }
}
</script>

Answer 8

我让它为我的 v-text-field 工作：

setTimeout(() => this.$refs.YOURVTEXTFIELDREF.$refs.input.focus(), 100);

Answer 9

您可以使用自动对焦属性

<v-text-field
                        autofocus
                        label="Insert Document Number*"
                        single-line
                      ></v-text-field>

如何在Vuetify和TypeScript中以编程方式关注v-textarea？

9 个答案: