Question

我有一个输入字段，带有一个编辑按钮，每当我按下编辑按钮时，我都会将我的javascript焦点放在输入字段上，如下所示：

接下来我想隐藏Input字段，使用CSS，使用Vue v-class指令动态显示，这也可以正常工作：

我唯一改变的是.editInputField类中的CSS，从显示块到显示无。

.editInputField {
    display: none;
}

.show {
    display: block;
}

现在Inputfield动态显示，但focus（）不起作用，我不明白为什么。有没有人有任何建议？

对于喜欢CodePen的人：

工作示例：http://codepen.io/anon/pen/Jdgozw

非工作示例：http://codepen.io/anon/pen/BNXyEz

Answer 1

您需要将focus()调用放在$nextTick处理程序中，因为（在生产模式下）DOM的更改通常在模型更改后的批处理过程中发生。

这是一个有效的更新CodePen：

http://codepen.io/anon/pen/RPXNXN

关键变化是：

        editTask: function (that) {
            this.editedTodo = that.todo;

            this.$nextTick(function () {
              that.$$.editInputField.focus();
            });
        },

有关$nextTick的更多信息，请参阅：http://vuejs.org/api/instance-methods.html

更改CSS会破坏Javascript Focus（）方法

1 个答案: