填字游戏焦点不会在带有数字的输入上移动，尝试将包装器和数字放在 jQuery 函数中

Question

我正在做一个填字游戏，并试图让焦点通过箭头键左右移动，并在输入一个字母后，但它卡在了带有数字的方块上。

这就是我的 html 中包含数字的 div 的样子。

enter co<div><input class="letter" type="text" disabled /> </div>
    <div><input class="letter" type="text" disabled /> </div>
      <div class="wrapper">
      <input class="letter hideletter" type="text" maxlength="1" value="" placeholder="D" />
      <span class="num">1</span>
      </div>   
    <div><input class="letter" type="text" disabled /> </div>
    <div><input class="letter" type="text" disabled /> </div>

Jquery:

 //makes arrow keys work, but only works right to left and left to right at this point
$(document).keydown(
    function (e) {

        //makes focus jump to next input when a letter is typed
        $(".hideletter:focus").on('input', function() {
            $(".hideletter:focus").next().focus();


        });

        switch (e.which) {


            case 39: //right
               $(".hideletter:focus").next().focus();
                $(".num:focus").next().focus();
                break;
            case 40: //down doesn't work
                $(".hideletter:focus").next().focus();
                $(".num:focus").next().focus();
                break;

            case 37: //left
                $(".hideletter:focus").prev().focus();
                $(".num:focus").prev().focus();
                break; 

            case 38: //up doesn't work
                $(".hideletter:focus").next().focus();
                $(".num:focus").next().focus();
                break;



                default: return; // exit this handler for other keys  

        }
        e.preventDefault(); // prevent the default action (scroll / move caret)
    });

这是一个 link 的填字游戏。 https://jenniferlang1921.github.io/Crossword2/

这是我的代码的 link：https://github.com/JenniferLang1921/Crossword2

此外，如果您对如何上下移动箭头有任何想法，那就太好了。

谢谢！

Answer 1

当输入元素的父元素为 div 时，您的代码将中断，因为焦点将始终转到下一个元素，这意味着下一个元素将始终为 <span class="num">4</span>

为了修复它，您必须检查当前元素是否有任何父元素的条件，如果有父元素，则将焦点更改到父元素旁边

switch (e.which) {
                case 39:
              var focusedElement= $(document.activeElement);

               if(focusedElement.parent().hasClass('wrapper')){
                focusedElement.parent().next().focus();
               }
else{
                   $(".hideletter:focus").next().focus();
                   $(".num:focus").next().focus();
}

您可以将相同的逻辑应用于您需要的其余击键

填字游戏焦点不会在带有数字的输入上移动，尝试将包装器和数字放在 jQuery 函数中

Crossword puzzle focus won't move across the inputs with a number, Tried putting the wrapper and the number in the jQuery function

jquery

focus

input

crossword