Question

我昨天才开始使用vue.js进行编码，而且我不知道如何关注＆＃34;在没有使用＆＃34;传统＆＃34;的文本框上JS方式，即document.getElementById('myTextBox').focus()。

最初，我的文本框已隐藏。我有一个＆＃34;开始＆＃34;按钮，当用户点击它时，会显示文本框，我想在那里设置focus，可以这么说。我已经尝试使用ref，但无济于事（请参阅下面的代码）。

HTML：

<input id="typeBox" ref="typeBox" placeholder="Type here..." />

的Javascript

export default {
  name: 'game',

  methods: {
    startTimer () {
      setTimeout(function () { /* .focus() won't work without this */

        /* ugly and not recommended */
        // document.getElementById('typeBox').focus()

        /* Throws the error: Cannot read property 'typeBox' of undefined */
        this.$refs.typeBox.focus()

        // ... any other options?
          // ...

      }, 1)
    }
  } /* END methods */

} /* END export default */

有谁知道怎么做？请帮忙。

更新

在autofocus上添加input可以在加载页面后立即进行聚焦。但在我的应用程序中，需要重新聚焦＆＃34;在输入字段上多次没有重新加载页面，这就是为什么我需要一种方法来调用.focus()。

Answer 1

在这里分享解决方案，万一有人遇到同样的问题......

我终于在一位资深程序员的帮助下解决了这个问题。我还能够使用setTimeout版本vue消除nextTick()。

正确的JS代码：

startTimer () {
    this.$nextTick(() => {

        // this won't work because `this.$refs.typeBox` returns an array
        // this.$refs.typeBox.focus()

        //this one works perfectly
        this.$refs.typeBox[0].focus()

    })
} /* END startTimer */

<强>解释

当我使用console.log(this.$refs.typeBox)时，它返回了这个数组：

这就是代码工作的原因，它必须是typeBox[0].focus()而不是typeBox.focus()。

Answer 2

this函数中setTimeout的值将被设置为window个对象，因为它是一段时间后执行的回调函数，它已经失去{{1}的范围关键字，它是从调用函数的位置动态设置的。

箭头功能不会绑定它自己的this值。

this

OR

startTimer () {
  setTimeout(() => {
    this.$refs.typeBox.focus()
  }, 1)
}

Answer 3

最后，不用setTimeout就解决了问题，这要归功于window.requestAnimationFrame（我不知道为什么）：

startTimer () {
    window.requestAnimationFrame(() => this.$refs.typeBox.focus())
}

它甚至可以用于自定义组件聚焦。

Answer 4

看到这个：

＆＃13;

$(function(){
  $("#my_text").hide();
})

function onClickTest(){
  $("#my_text").show();
    document.getElementById("my_text").focus();
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="my_text"/>

    <button onclick="onClickTest()">click</button>

＆＃13;

Vue：如何在按钮点击

4 个答案: