Question

是否可以将导航键从“Tab”更改为网站上的任何其他内容，例如“Enter”，这样我就可以按下“Enter”并按下下一个“tabindex”的元素？

Answer 1

只需在按Enter（键码13）时添加所需的交互，例如：

<script>alert(313)</script>=1

按下输入时发出警报，然后将焦点移至您想要的项目

Answer 2

这是使用vue执行此操作的方法：

new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue.js!'
  },
  methods: {
    moveNext(e) {
      let newTabIndex = +(e.target.getAttribute("tabindex") || "0") + 1;
      if (newTabIndex > this.$el.querySelectorAll("[tabindex]").length) newTabIndex = 1;
      this.$el.querySelector("[tabindex='" + newTabIndex + "']").focus();
    }
  }
})

<script src="https://unpkg.com/vue"></script>

<div id="app">
  <p>{{ message }}</p>
  <form action="">
    <input type="text" tabindex="1" @keydown.enter.prevent="moveNext" placeholder="hit tab or enter"><br>
    <input type="text" tabindex="2" @keydown.enter.prevent="moveNext" placeholder="hit tab or enter"><br>
    <input type="text" tabindex="3" @keydown.enter.prevent="moveNext" placeholder="hit tab or enter"><br>
    <input type="text" tabindex="4" @keydown.enter.prevent="moveNext" placeholder="hit enter"><br>
    
    <input type="submit" style="visibility: hidden;" /> <!-- to prove .prevent is needed -->
  </form>
</div>

更改网站上的导航键

2 个答案: