Фокус кроссворда не будет перемещаться по входам с числом. Попытался поместить упаковщик и число в функцию jQuery. - PullRequest
Новая
       30

Фокус кроссворда не будет перемещаться по входам с числом. Попытался поместить упаковщик и число в функцию jQuery.

0 голосов
/ 31 августа 2018

Я делаю кроссворд и пытаюсь заставить фокус перемещаться вправо и влево с помощью клавиш со стрелками и после ввода буквы, но она застревает на квадратах с числами в них.

Вот так выглядит мой 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)
    });

Вот ссылка на кроссворд. https://jenniferlang1921.github.io/Crossword2/

Вот ссылка на мой код: https://github.com/JenniferLang1921/Crossword2

Кроме того, если у вас есть идеи о том, как перемещать стрелки вверх и вниз, это было бы замечательно.

Спасибо!

1 Ответ

0 голосов
/ 31 августа 2018

Ваш код сломается, когда входной элемент с родительским 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();
}

Вы можете применить ту же логику к остальным нужным нажатиям клавиш

...