Введите ключ для кнопки

Question

Я изменил свой код с this так, чтобы, если я нажму на кнопку ввода, он дойдет до первой кнопки, и если я нажму на вкладку, она перейдет к второй кнопке. Но теперь моя проблема: от первой кнопки, если я нажимаю кнопку ввода, она не вызывает эту кнопку, и если я снова нажимаю вкладку со второй кнопки, она не будет первой кнопкой. Так мне нужны эти вещи, чтобы это произошло:

1) С первой кнопки/сек, если я нажать кнопку ввода, кнопка должна вызывать (нажмите)

2) Если я ударил вкладку от второй кнопки она должна идти между первым и второй.

Это код, который я использовал.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<button id="hel">hello</button> 
<button id="hel1" >hello1</button> 
<script> 
    $(function() { 
     $(document).keydown(function(e) { 
      if (e.keyCode == 13) { 
       $("button#hel").focus(); 
      } 
      if (e.keyCode == 9) { 
       $("button#hel1").focus(); 
      } 
     return false; 
     }); 
    }); 
</script> 

Какое изменение должно быть сделано?

Answer 1

Алексис находится близко, но вы хотите фокус идти на кнопку после первого входа, так что вы хотите сделать, это установить детектор. Вы также хотите, чтобы он переключался между кнопками, когда вы нажимаете вкладку, возвращаясь к вершине, если они находятся на последнем, когда они нажимают prss. Если кнопка сфокусирована, нажмите ее, если нет, добрались до первой кнопки.

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

$(function() { 
 
\t $(document).keydown(function(e) { 
 
\t \t var currentBtn = $(".mybtn:focus"), 
 
\t \t inputs = $(".mybtn"), 
 
\t \t currentIndex = inputs.index(currentBtn), 
 
\t \t next = inputs.filter(function (index) { 
 
\t \t \t if (currentIndex < inputs.length) { 
 
\t \t \t \t return index == currentIndex + 1; 
 
\t \t \t } else { 
 
\t \t \t \t return index == 0; 
 
\t \t \t } 
 
\t \t }); 
 

 
\t \t if (e.keyCode == 13) { 
 
\t \t \t if (currentBtn.length) { 
 
\t \t \t \t currentBtn.click(); 
 
\t \t \t } else { 
 
\t \t \t \t $(".mybtn").first().focus(); 
 
\t \t \t } 
 
\t \t } 
 
\t \t if (e.keyCode == 9) { 
 
\t \t \t if (currentBtn.length) { 
 
\t \t \t if (currentBtn.is(".mybtn:last")) { 
 
\t \t \t \t \t $(".mybtn").first().focus(); 
 
\t \t } else { 
 
\t \t \t \t \t next.focus(); 
 
\t \t \t \t } 
 
\t \t \t } else { 
 
\t \t \t \t $(".mybtn").first().focus(); 
 
\t \t \t } 
 
\t \t } 
 
\t \t return false; 
 
\t }); 
 
}); 
 

 
$("button#hel").on('click', function(){ 
 
\t alert("hello press"); 
 
}); 
 

 
$("button#hel1").on('click', function(){ 
 
\t alert("hello1 press"); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button id="hel" class='mybtn'>hello</button> 
 
<button id="hel1" class='mybtn' >hello1</button>

Answer 2

Вы можете попробовать что-то вроде этого.

Это работает, но есть лучший способ сделать это.

$(function() { 
 
$(document).keydown(function(e) { 
 
if (e.keyCode == 13) { 
 
     $(".mybtn").is(":focus").trigger("click"); 
 
} 
 
if (e.keyCode == 9) { 
 
    if($("button#hel").is(":focus")) 
 
    $("button#hel1").focus(); 
 
    else 
 
    $("button#hel").focus(); 
 
} 
 
return false; 
 
}); 
 

 
$("button#hel").focus(); 
 
}); 
 

 
$("button#hel").click(function(){ 
 
    alert("hello press"); 
 
    }); 
 

 
$("button#hel1").click(function(){ 
 
    alert("hello1 press"); 
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button id="hel" class='mybtn'>hello</button> 
 
<button id="hel1" class='mybtn' >hello1</button>