Question

我需要通过按Enter键将文本框聚焦在顶点上

第一行，然后是第二行，然后是第三行

这里是我的脚本，

$(document).ready(function() {
	$(".vertical_row1").keypress(function(event) {
        if(event.keyCode == 13) { 
        textboxes = $("input.vertical_row1");
        debugger;
        currentBoxNumber = textboxes.index(this);
        if (textboxes[currentBoxNumber + 1] != null) {
            nextBox = textboxes[currentBoxNumber + 1]
            nextBox.focus();
            nextBox.select();
            event.preventDefault();
            return false 
            }
        }
    });
})

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table>
    <tr>
    	<td><input class="vertical_row1" type="text" name="" value="" placeholder=""></td>
    	<td><input class="vertical_row2" type="text" name="" value="" placeholder=""></td>
    </tr>
    <tr>
    	<td><input class="vertical_row1"  type="text" name="" value="" placeholder=""></td>
    	<td><input class="vertical_row2" type="text" name="" value="" placeholder=""></td>
    </tr>
<table>

Answer 1

(function ($) {
  $.fn.formNavigation = function () {
    $(this).each(function () {
      
      // Events triggered on keydown (repeatable when holding the key)
      $(this).find('input').on('keydown', function(e) {
        // Vertical navigation using tab as OP wanted
        if (e.which === 13 && !e.shiftKey) {
          // navigate forward
          if ($(this).closest('tr').next().find('input').length>0) {
            // when there is another row below
            e.preventDefault();
            $(this).closest('tr').next().children().eq($(this).closest('td').index()).find('input').focus();
          } else if ($(this).closest('tbody').find('tr:first').children().eq($(this).closest('td').index()+1).find('input').length>0) {
            // when last row reached
            e.preventDefault();
            $(this).closest('tbody').find('tr:first').children().eq($(this).closest('td').index()+1).find('input').focus();
          }
        } else if (e.which === 13 && e.shiftKey) {
          // navigate backward
          if ($(this).closest('tr').prev().find('input').length>0) {
            // when there is another row above
            e.preventDefault();
            $(this).closest('tr').prev().children().eq($(this).closest('td').index()).find('input').focus();
          } else if ($(this).closest('tbody').find('tr:last').children().eq($(this).closest('td').index()-1).find('input').length>0) {
            // when first row reached
            e.preventDefault();
            $(this).closest('tbody').find('tr:last').children().eq($(this).closest('td').index()-1).find('input').focus();
          }
        }
      });
    });
  };
})(jQuery);

// usage
$('.gridexample').formNavigation();

<!DOCTYPE html>
<html>
<body>
<table class="gridexample">
  <tbody>
    <tr>
      <td><input type="text"></td>
      <td><input type="text"></td>
    </tr>
    <tr>
      <td><input type="text"></td>
      <td><input type="text"></td>
    </tr>
  </tbody>
<table>

<!-- jQuery needed for this solution -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
</body>
</html>

Answer 2

尝试tabIndex TabIndex MDN

    <table>
        <tr>
            <td><input tabindex="0" class="vertical_row1" type="text" name="" value="" placeholder=""></td>
            <td><input tabindex="2" class="vertical_row2" type="text" name="" value="" placeholder=""></td>
        </tr>
        <tr>
            <td><input tabindex="1" class="vertical_row1"  type="text" name="" value="" placeholder=""></td>
            <td><input tabindex="3" class="vertical_row2" type="text" name="" value="" placeholder=""></td>
        </tr>
    <table>

垂直于文本框

2 个答案: