更改 CSS 中断 Javascript Focus() 方法

Question

我有一个输入字段，带有一个编辑按钮，每当我按下编辑按钮时，我都会 javascript 像这样关注输入字段：

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

我唯一更改的是 .editInputField Class 中的 CSS 从 显示块 到 显示 none.

.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() 方法

Changing CSS breaks Javascript Focus() Method

html

javascript

css

vue.js