<div>
  <table><tr><td><input type="text"/></td></tr></table>
</div>
<div>
  <table><tr><td><input type="text"/></td></tr></table>
</div>

Рассмотрим этот раздел, например. Есть два текстовых поля (где угодно на странице). Я пытаюсь установить фокус от первого ввода до непосредственного следующего ввода, когда пользователь нажимает клавишу Enter. Как бы я достиг этого в JQuery?

1
Shanzid Shaiham 10 Янв 2017 в 15:49

6 ответов

Лучший ответ

Попробуйте это, это поможет вам

$(document).ready(function() {
  $('input').on("keypress", function(e) {

    if (e.which == 13) {
      var tab = $(this).attr("tabindex") + 1
      $("input[tabindex=" + tab + "]").focus();
    }
  });


});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<div>
  <table>
    <tr>
      <td>
        <input type="text" tabindex="1" />
      </td>
    </tr>
  </table>
</div>
<div>
  <table>
    <tr>
      <td>
        <input type="text" tabindex="2" />
      </td>
    </tr>
  </table>
</div>
1
vijay 10 Янв 2017 в 13:08

Вы можете дать всем элементам ввода класс (вы можете сделать то же самое с помощью текстового тега ввода, если в вашем документе нет текстового элемента типа ввода, на который вы не хотите фокусировать), и можете найти следующий элемент ввода. имея тот же класс.

$(".test").keypress(function(e) {
    var inputs = $(".test");
    if(e.which == 13) {   
    var $next = inputs.filter(":gt(" + inputs.index(this) + ")").first();
    $next.focus();
    }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <table><tr><td><input class ="test"type="text"/></td></tr></table>
</div>
<div>
  <table><tr><td><input class="test" type="text"/></td></tr></table>
</div>
<div>
  <table><tr><td><input class="test" type="text"/></td></tr></table>
</div>
<div>
  <table><tr><td><input class="test" type="text"/></td></tr></table>
</div>
0
Deep 10 Янв 2017 в 13:09
$(document).ready(function() {

  $('input[type=text]').keypress(function(e) {
      if (e.keyCode == 13) {

        if ($(this).attr('class') === "last") {
          $('input[type=text]').eq(0).focus()
        } else {

          $('input[type=text]').closest('input[type=text]').focus();
        }
      }
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="#">
 
  <input type="text"  />
  
  <input type="text" class="last" />
</form>
1
Jignesh Hirpara 10 Янв 2017 в 14:23

Попробуй это :)

$(document).keypress(function(e) {
    if(e.which == 13) {
        var focusElem = document.activeElement;
        var nextInput = $(focusElem).next().attr('id');
        $("#" + nextInput).focus();
    }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="input_1" />
<input type="text" id="input_2" />
<input type="text" id="input_3" />
<input type="text" id="input_4" />
0
Idoshhh 10 Янв 2017 в 13:02

Вы можете попробовать другой вариант, например jsfiddle,

Html:

<div>
  <table><tr><td><input type="text" class='inputs'/></td></tr></table>
</div>
<div>
  <table><tr><td><input type="text" class='inputs'/></td></tr></table>
</div>

Js:

$(document).on("input", "input", function(e){
   if(e.which == 13){
       $(this).next('.inputs').focus();
   }
});
0
Rahul 10 Янв 2017 в 13:12
 $(document).on("keydown", "#Textbox1", function(e) {
      var keyCode = e.keyCode || e.which; 
      if (keyCode == 13) {                       
        e.preventDefault(); 
        $("#Textbox2").focus();
      }
    });

Woking Скрипка

0
Aravindh Gopi 10 Янв 2017 в 13:07