Javascript 如何在每次模式弹出时设置模式内的自动对焦按钮？

我正在使用Vue.js 2显示引导模式。下面是一个例子

<div class="modal fade" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="button" autofocus class="btn btn-primary">Always focus</button>
            </div>
        </div>
    </div>
</div>

其想法是，当模式弹出时，用户应该能够按Enter键单击“始终聚焦”按钮，而无需使用鼠标。当用户按下左箭头按钮或右箭头按钮时，焦点从“始终聚焦”按钮切换到“关闭”按钮，反之亦然

使用“自动对焦”属性，它可以很好地工作，但只有在第一次弹出“模态”时才能工作。第二次弹出模式时，“始终聚焦”按钮会失去焦点

如何使“始终聚焦”按钮在每次弹出模式时始终具有聚焦？或者，我如何使用CSS解决方案、JavaScript解决方案或Vue解决方案来实现这个想法

---

请注意，我使用的是Vue.js 2。也欢迎任何Vue.js解决方案，但不欢迎jQuery。

您可以使用Vue的$refs对象来实现这一点。从本质上讲，您为按钮提供了一个ref属性，然后您可以通过调用该属性始终访问Vue代码中的该元素。$refs.：

在这里使用Vue的$nextTick函数也很重要。您必须等待按钮变为可见，才能对其进行对焦。通过将焦点代码添加到$nextTick回调中，您可以确保DOM已经完成了从先前对数据模型的更改（例如，显示模式的更改）的更新

注意：上面只是一个例子，因为我不知道你的模态代码是什么样子的

---

您可以使用Vue的$refs对象来完成此操作。从本质上讲，您为按钮提供了一个ref属性，然后您可以通过调用该属性始终访问Vue代码中的该元素。$refs.：

在这里使用Vue的$nextTick函数也很重要。您必须等待按钮变为可见，才能对其进行对焦。通过将焦点代码添加到$nextTick回调中，您可以确保DOM已经完成了从先前对数据模型的更改（例如，显示模式的更改）的更新

注意：上面只是一个例子，因为我不知道你的模态代码是什么样子的

---

当模式打开时，您可以使用“已安装”功能始终聚焦按钮：

mounted: function() {
  document.getElementById("focus-button").focus();
}

或者，您可以监听按键并检查是否是enter键，然后以编程方式单击按钮

onKeyPress: function(e) {
  if (e.which == 13) {
    document.getElementById("focus-button").click();
  }
}

---

当模式打开时，您可以使用“已安装”功能始终聚焦按钮：

mounted: function() {
  document.getElementById("focus-button").focus();
}

或者，您可以监听按键并检查是否是enter键，然后以编程方式单击按钮

onKeyPress: function(e) {
  if (e.which == 13) {
    document.getElementById("focus-button").click();
  }
}

---

使用ref属性是一个好方法，但是$nextTrick对我不起作用。此.$refs.always\u焦点结果未定义，因为需要首先渲染模态。所以诀窍是使用setTimeout而不是$nextTrick。@OConnor仅供参考，函数名是$nextTick而不是$nextTrickUsing ref属性是一个好的名称，但是$nextTrick对我不起作用。此.$refs.always\u焦点结果未定义，因为需要首先渲染模态。所以诀窍是使用setTimeout而不是$nextTrick.@OConnor仅供参考，函数名是$nextTick而不是$nextTrickUsing document.getElementByIdfocus-button.focus是另一种好方法。但由于需要首先呈现模态，因此在装入的内部使用document.getElementByIdfocus-button.focus没有帮助。但是，如果在setTimeout内使用document.getElementByIdfocus-button.focus，则会在元素上设置焦点。vue生命周期的已装入部分确保首先呈现dom。但它不能保证装入子元素，因此在这种情况下可以使用$nextTick函数。请参阅docs:FWIW，挂载方法在一个简单的模态对话框组件中对我有效。使用document.getElementByIdfocus-button.focus是另一个好方法。但由于需要首先呈现模态，因此在装入的内部使用document.getElementByIdfocus-button.focus没有帮助。但是，如果在setTimeout内使用document.getElementByIdfocus-button.focus，则会在元素上设置焦点。vue生命周期的已装入部分确保首先呈现dom。但它不能保证装入子元素，因此在这种情况下可以使用$nextTick函数。参见docs:FWIW，挂载方法在一个简单的模态对话框组件中对我有效。