Question

我的表格中有很多条目。一旦我在当前文本框中输入值，我想将焦点更改为下一个文本框。并希望将此过程继续到最后一个字段。我的问题是，当我在文本框中输入值时，是否可以模拟通过javascript编码按Tab键时会发生什么。

如果不按键盘上的Tab键，我想通过javascript带来相同的功能。这可能吗？

Answer 1

你只需要将焦点放在下一个输入字段上（通过在该输入元素上调用focus（）方法），例如，如果你正在使用jQuery，这个代码将在按下enter时模拟tab键：

var inputs = $(':input').keypress(function(e){ 
    if (e.which == 13) {
       e.preventDefault();
       var nextInput = inputs.get(inputs.index(this) + 1);
       if (nextInput) {
          nextInput.focus();
       }
    }
});

Answer 2

前一段时间需要模拟标签功能，现在我released it as a library使用了jquery。

EmulateTab：一个jQuery插件，用于模拟页面元素之间的标签。

你可以see how it works in the demo。

if (myTextHasBeenFilledWithText) {
  // Tab to the next input after #my-text-input
  $("#my-text-input").emulateTab();
}

Answer 3

function nextField(current){
    for (i = 0; i < current.form.elements.length; i++){
        if (current.form.elements[i].tabIndex == current.tabIndex+1){
            current.form.elements[i].focus();
            if (current.form.elements[i].type == "text"){
                current.form.elements[i].select();
            }
        }
    }
}

当提供当前字段时，它将使用下一个选项卡索引将焦点跳转到该字段。用法如下

<input type="text" onEvent="nextField(this);" />

Answer 4

这会模拟表格中的标签，并在按下回车键时将焦点放在下一个输入上。

window.onkeypress = function(e) {
    if (e.which == 13) {
        e.preventDefault();
        var inputs = document.getElementsByClassName('input');
        for (var i = 0; i < inputs.length; i++) {
        if (document.activeElement.id == inputs[i].id && i+1 < inputs.length ) {
            inputs[i+1].focus();
            break;   
        }
    }

Answer 5

我找不到可以做我想要的答案。我有一个问题，其中有一些我不希望用户标签的链接元素。这就是我想出的：

（请注意，在我自己的代码中，我在a:not(.dropdown-item)行使用了a而不是allElements，以防止用户标记到a.dropdown-item。）

function(event){
        //Note that this doesn't honour tab-indexes

        event.preventDefault();

        //Isolate the node that we're after
        const currentNode = event.target;

        //find all tab-able elements
        const allElements = document.querySelectorAll('input, button, a, area, object, select, textarea, [contenteditable]');

        //Find the current tab index.
        const currentIndex = Array.from(allElements).findIndex(el => currentNode.isEqualNode(el))

        //focus the following element
        allElements[currentIndex + 1].focus();
}

Answer 6

在第一个问题中，你不需要在每一个浪费的输入上都有一个事件监听器。

相反，请听取回车键并找到当前关注的元素使用document.activeElement

window.onkeypress = function(e) {
    if (e.which == 13) {
       e.preventDefault();
       var nextInput = inputs.get(inputs.index(document.activeElement) + 1);
       if (nextInput) {
          nextInput.focus();
       }
    }
};

一个事件监听器比许多人更好，特别是在低功耗/移动浏览器上。

Answer 7

这应该有效。使用和不使用tabindex。

＆＃13;

var currentlyFocused = undefined;
var tabableElements = undefined;

/**
 * Compare function for element sort
 * @param {string | null} a
 * @param {string | null} b
 * @param {boolean} asc
 */
function sortCompare(a, b, asc = true) {
  let result = null;
  if (a == null) result = 1;
  else if (b == null) result = -1;
  else if (parseInt(a) > parseInt(b)) result = 1;
  else if (parseInt(a) < parseInt(b)) result = -1;
  else result = 0;
  return result * (asc ? 1 : -1);
}

/**
 * When an element is focused assign it to the currentlyFocused variable
 * @param {Element} element
 */
function registerOnElementFocus(element) {
  element.addEventListener("focus", function(el) {
    currentlyFocused = el.srcElement;
  });
}

/**
 * Tab Trigger
 */
function onTabClick() {
  //Select currently focused element
  let currentIndex;
  tabableElements.forEach((el, idx) => {
    //return if no element is focused
    if (!currentlyFocused) return;
    if (currentlyFocused.isEqualNode(el)) {
      //assign current index and return
      currentIndex = idx;
      return;
    }
  });
  //if theres no focused element or the current focused element is last start over
  let lastIndex = tabableElements.length - 1;
  let nextElementidx = currentIndex === undefined || currentIndex == lastIndex ? 0 : currentIndex + 1;
  //Focus
  currentlyFocused = tabableElements[nextElementidx];
  currentlyFocused.focus();
}
/**
 * Init must be run after all elements are loadead in the dom
 */
function init() {
  //Get all tab-able elements
  let nodeList = document.querySelectorAll("input, button, a, area, object, select, textarea, [tabindex]");
  //To array for easier manipulation
  tabableElements = Array.prototype.slice.call(nodeList, 0);
  //Correcting tabindexes to ensure correct order
  tabableElements.forEach((el, idx, list) => {
    let tabindex = el.getAttribute("tabindex");
    //-1 tabindex will not receive focus
    if (tabindex == -1) list.splice(idx, 1);
    //null or 0 tabindex in normal source order
    else if (tabindex == null || tabindex == 0) {
      list[idx].setAttribute("tabindex", 9999 + idx);
    }
  });
  //sort elements by their tabindex in ascending order
  tabableElements.sort((elementA, elementB) => sortCompare(elementA.getAttribute("tabindex"), elementB.getAttribute("tabindex")));
  //register focus event to elements
  tabableElements.forEach(el => registerOnElementFocus(el));
}

＆＃13;

<!doctype html>
<html lang="en">

<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

  <title>Virtual tab</title>
</head>

<body onload="init()">
  <div class="container">
    <h3>Virtual Tab Demo</h3>
    <form>
      <div class="btn btn-primary" style="position: fixed;" onclick="onTabClick()">
        Tab!
      </div>
      <br>
      <br>
      <button id="button1" type="button" onclick="alert('button 1')">Button1</button>
      <button id="button2" type="button" onclick="alert('button 2')">Button2</button>
      <br>
      <br>
      <input id="text" type='text'>text
      <br>
      <input id="password" type='password' tabindex="-1">password
      <br>
      <input id="number" type='number' tabindex="5">number
      <br>
      <input id="checkbox" type='checkbox'>checkbox
      <br>
      <input id="radio" type='radio'>radio
      <br>
      <br>
      <button id="button3" type="button" onclick="alert('button 3')">Button3</button>
      <button id="button4" type="button" onclick="alert('button 4')">Button4</button>
      <br>
      <br>
      <select id="select">
        <option value="volvo">Volvo</option>
        <option value="saab">Saab</option>
        <option value="mercedes">Mercedes</option>
        <option value="audi">Audi</option>
      </select>
      <br>
      <br> textarea
      <br>
      <textarea id="textarea"></textarea>
        <br>
        <br>
        <span id="span" tabindex="1">Focus other elements.</span>
    </form>
  </div>
  <!-- Optional JavaScript -->
  <!-- jQuery first, then Popper.js, then Bootstrap JS -->
  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>

</html>

＆＃13;

Answer 8

如果您有jQuery UI，则此小功能允许基本制表符

handlePseudoTab(direction) {
    if (!document.hasFocus() || !document.activeElement) {
        return;
    }
    const focusList = $(":focusable", $yourHTMLElement);
    const i = focusList.index(document.activeElement);
    if (i < 0) {
        focusList[0].focus(); // nothing is focussed so go to list item 0
    } else if (direction === 'next' && i + 1 < focusList.length) {
        focusList[i + 1].focus(); // advance one
    } else if (direction === 'prev' && i - 1 > -1) {
        focusList[i - 1].focus(); // go back one
    }
}

Answer 9

在香草JS中：

function keydownFunc(event) {
      var x = event.keyCode;        
      if (x == 13) {
        try{
            var nextInput = event.target.parentElement.nextElementSibling.childNodes[0];
            nextInput.focus();
          }catch (error){
            console.log(error)
          }
    }

Answer 10

我已经 ltiong_sh 的答案适合我：

function nextField(current){
    var elements = document.getElementById("my-form").elements;
    var exit = false;
    for(i = 0; i < elements.length; i++){   
        if (exit) {
            elements[i].focus();
            if (elements[i].type == 'text'){
                elements[i].select();
            }   
            break;
        }
        if (elements[i].isEqualNode(current)) { 
            exit = true;
        }       
    }
}

当前输入有值时，如何前进到下一个表格输入？

10 个答案: