javascript - 每次弹出模态时，如何在模态内的按钮上设置自动对焦？

Question

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

<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 键来点击 Always focus 按钮而不使用鼠标。当用户按下 left 或 right 箭头按钮时，焦点从 Always focus 按钮切换到 Close按钮，反之亦然。

使用 autofocus 属性，它可以很好地工作，但前提是每次第一次弹出模态。第二次弹出模式时，Always focus 按钮失去焦点。

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

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

Answer 1

您可以使用 Vue 的 $refs 来完成此操作目的。 ( see docs ) 本质上，你给按钮一个 ref属性，那么您始终可以通过调用 this.$refs.<whatever name you gave it> 在 Vue 代码中访问该元素:

<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 ref="always_focus" type="button" autofocus class="btn btn-primary">Always focus</button>
            </div>
        </div>
    </div>
</div>

然后，添加或修改您的 show模式的事件处理程序:

export default {
  ...
  methods: {
    onModalShow() {
      this.$nextTick(() => {
        this.$refs.always_focus.focus();
      });
    }
  },
  ...
}

Vue的使用$nextTick() ( docs ) 这里的功能也很重要。您必须等待按钮变得可见才能聚焦它。通过将焦点代码添加到 $nextTick()回调，您可以确定 DOM 已完成对数据模型的先前更改的更新(例如，显示模态的更改)。

NOTE: the above is just an example, since I don't know exactly what your modal code looks like.