jquery 按Enter键时聚焦tabindex中的下一个元素

vngu2lb8  于 2023-02-18  发布在  jQuery
关注(0)|答案(2)|浏览(203)

我的应用程序上的用户习惯于在切换到下一个输入而不是“Tab”时按“Enter”,所以我一直试图在按“Enter”而不是“Tab”时将焦点切换到tabindex中的下一个元素,给出了以下代码:

<div id="data">
  <input type="text" tabindex="0">
  <input type="text" value="Lorem ipsum" readonly><br/>
  <input type="text" value="Lorem ipsum" readonly>
  <input type="text" value="Lorem ipsum" readonly><br/>
  <input type="text" tabindex="1">
  <input type="text" tabindex="2">
</div>

现在我已经做到了,我想分享我的解决方案,这样下一个遇到这个问题的人就可以很快找到解决方案。

flvtvl50

flvtvl501#

溶液
在我的例子中,我将$("#data")作为触发函数的目标,但您可以将其与$(window)一起使用。
此函数将在按下按键时触发,将检查按键是否为"Enter"(按键代码为13),根据tabindex查找聚焦元素(activeElement)的下一个元素,然后将其聚焦。

$("#data").keydown(function(e) {
  if(e.keyCode == 13){
    let active = document.activeElement;
    let target = $('[tabindex="' + (active.tabIndex + 1) + '"]');
    target.focus();
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="data">
  <input type="text" tabindex="0">
  <input type="text" value="Lorem ipsum" readonly><br/>
  <input type="text" value="Lorem ipsum" readonly>
  <input type="text" value="Lorem ipsum" readonly><br/>
  <input type="text" tabindex="1">
  <input type="text" tabindex="2">
</div>

编辑

参考@freedomn-m的注解,下面是他在non-readonly元素上设置tabindex属性的代码:

$(() => $("#data :input:not([readonly])").attr("tabIndex", (i, a) => i));

这是我之前用的代码:

$(document).ready(function(){
  let inputs = $('#data :input');
  let tabindex = 0;
  for(let i = 0; i < inputs.length; i++){
    if($(inputs[i]).attr("readonly") !== "readonly"){
      inputs[i].setAttribute("tabindex", tabindex);
      tabindex++;
    }
  }
})
ghg1uchk

ghg1uchk2#

const inputs = document.querySelectorAll('#data input');
    const inputsArray = Array.prototype.slice.call(inputs);
    
    document.addEventListener('keypress', function (event) {
      const key = event.which || event.keyCode;
      if (key === 13) { // 13 is the keycode for the Enter key
        const activeElement = document.activeElement;
        const index = inputsArray.indexOf(activeElement);
        if (index > -1 && index < inputsArray.length - 1) {
          inputsArray[index + 1].focus();
        }
      }
    });
<div id="data">
  <input type="text" tabindex="0">
  <input type="text" value="Lorem ipsum" readonly><br/>
  <input type="text" value="Lorem ipsum" readonly>
  <input type="text" value="Lorem ipsum" readonly><br/>
  <input type="text" tabindex="1">
  <input type="text" tabindex="2">
</div>

相关问题