сосредоточить внимание на текстовом поле - PullRequest
Новая
       2

сосредоточить внимание на текстовом поле

0 голосов
/ 11 января 2019

Мне нужно сфокусировать текстовое поле в тексте, нажав клавишу ввода

первый ряд, затем второй ряд, затем третий ряд

здесь Мой сценарий, 

$(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>

Ответы [ 2 ]

0 голосов
/ 17 января 2019 

(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>
0 голосов
/ 11 января 2019

Попробуйте 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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...