文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >如何使用Javascript在纵横字词网格中添加导航功能？

问如何使用Javascript在纵横字词网格中添加导航功能？
EN

Stack Overflow用户
提问于 2020-06-10 05:15:53
回答 1查看 181关注 0票数 1

我跟随this创建了我自己的纵横字谜：

html文件是这样的：

代码语言：javascript
复制
<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>The Weekly Crossword</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link rel="stylesheet" href="./mystyle.css">

</head>
<body>
<!-- partial:index.partial.html -->
<input type="checkbox" name="checkvaliditems" id="checkvaliditems" />
<label for="checkvaliditems">Let's check as we go?</label>

<div class="crossword-board-container">

    <div class="crossword-board">
        <!-- ROW 1 -->
        <input id="item1-1" class="crossword-board__item" type="text" minlength="1" maxlength="1" pattern="^[dD]{1}$" required="required" value="" />
        <input id="item1-2" class="crossword-board__item" type="text" minlength="1" maxlength="1" pattern="^[iI]{1}$" required="required" value="" />
        <input id="item1-3" class="crossword-board__item" type="text" minlength="1" maxlength="1" pattern="^[pP]{1}$" required="required" value="" />
        <input id="item1-4" class="crossword-board__item" type="text" minlength="1" maxlength="1" pattern="^[pP]{1}$" required="required" value="" />
        <input id="item1-5" class="crossword-board__item" type="text" minlength="1" maxlength="1" pattern="^[eE]{1}$" required="required" value="" />
        <input id="item1-6" class="crossword-board__item" type="text" minlength="1" maxlength="1" pattern="^[tT]{1}$" required="required" value="" />
        <!-- ROW 1 -->
        <!-- ROW 2 -->
        <input id="item2-1" class="crossword-board__item" type="text" minlength="1" maxlength="1" pattern="^[rR]{1}$" required="required" value="" />
        <span class="crossword-board__item--blank" id="item2-2"></span>
        <span class="crossword-board__item--blank" id="item2-3"></span>
        <span class="crossword-board__item--blank" id="item2-4"></span>
        <span class="crossword-board__item--blank" id="item2-5"></span>
        <span class="crossword-board__item--blank" id="item2-6"></span>
        <!-- ROW 2 -->
        <!-- ROW 3 -->
        <input id="item3-1" class="crossword-board__item" type="text" minlength="1" maxlength="1" pattern="^[aA]{1}$" required="required" value="" />
        <span class="crossword-board__item--blank" id="item3-2"></span>
        <span class="crossword-board__item--blank" id="item3-3"></span>
        <span class="crossword-board__item--blank" id="item3-4"></span>
        <span class="crossword-board__item--blank" id="item3-5"></span>
        <span class="crossword-board__item--blank" id="item3-6"></span>
        <!-- ROW 3 -->
        <!-- ROW 4 -->
        <input id="item4-1" class="crossword-board__item" type="text" minlength="1" maxlength="1" pattern="^[gG]{1}$" required="required" value="" />
        <input id="item4-2" class="crossword-board__item" type="text" minlength="1" maxlength="1" pattern="^[rR]{1}$" required="required" value="" />
        <input id="item4-3" class="crossword-board__item" type="text" minlength="1" maxlength="1" pattern="^[aA]{1}$" required="required" value="" />
        <input id="item4-4" class="crossword-board__item" type="text" minlength="1" maxlength="1" pattern="^[wW]{1}$" required="required" value="" />
        <input id="item4-5" class="crossword-board__item" type="text" minlength="1" maxlength="1" pattern="^[pP]{1}$" required="required" value="" />
        <span class="crossword-board__item--blank" id="item4-6"></span>
        <!-- ROW 4 -->
        <!-- ROW 5 -->
        <input id="item5-1" class="crossword-board__item" type="text" minlength="1" maxlength="1" pattern="^[oO]{1}$" required="required" value="" />
        <span class="crossword-board__item--blank" id="item5-2"></span>
        <span class="crossword-board__item--blank" id="item5-3"></span>
        <span class="crossword-board__item--blank" id="item5-4"></span>
        <span class="crossword-board__item--blank" id="item5-5"></span>
        <span class="crossword-board__item--blank" id="item5-6"></span>
        <!-- ROW 5 -->
        <!-- ROW 6 -->
        <input id="item6-1" class="crossword-board__item" type="text" minlength="1" maxlength="1" pattern="^[nN]{1}$" required="required" value="" />
        <span class="crossword-board__item--blank" id="item6-2"></span>
        <span class="crossword-board__item--blank" id="item6-3"></span>
        <span class="crossword-board__item--blank" id="item6-4"></span>
        <span class="crossword-board__item--blank" id="item6-5"></span>
        <span class="crossword-board__item--blank" id="item6-6"></span>
        <!-- ROW 6 -->
        <div class="crossword-board crossword-board--highlight crossword-board--highlight--across">
            <span id="across-1" class="crossword-board__item-highlight crossword-board__item-highlight--across-1"></span>
            <span id="across-2" class="crossword-board__item-highlight crossword-board__item-highlight--across-2"></span>
        </div>
        <div class="crossword-board crossword-board--highlight crossword-board--highlight--down">
            <span id="down-1" class="crossword-board__item-highlight crossword-board__item-highlight--down-1"></span>
        </div>
        <div class="crossword-board crossword-board--labels">
            <span id="label-1" class="crossword-board__item-label crossword-board__item-label--1"><span class="crossword-board__item-label-text">1</span></span>
            <span id="label-2" class="crossword-board__item-label crossword-board__item-label--2"><span class="crossword-board__item-label-text">2</span></span>
        </div>
        <div class="crossword-clues">
            <dl class="crossword-clues__list crossword-clues__list--across">
                <dt class="crossword-clues__list-title">Across</dt>
                <dd class="crossword-clues__list-item crossword-clues__list-item--across-1" data-number="1"> headmaster of Hogwarts (last name) when the Chamber of Secrets was opened for the first time (6)</dd>
                <dd class="crossword-clues__list-item crossword-clues__list-item--across-2" data-number="2"> Hagrid's Half Brother (5)</dd>
            </dl>
            <dl class="crossword-clues__list crossword-clues__list--down">
                <dt class="crossword-clues__list-title">Down</dt>
                <dd class="crossword-clues__list-item crossword-clues__list-item--down-1" data-number="1"> ______ Pox; a potentially fatal contagious disease that occurs in wizards and witches (6)</dd>
            </dl>

            </dl>

        </div>

        <div class="crossword-complete">
        Congratulations,
You are awesome!
        </div>

    </div>

</div>
<!-- partial -->

</body>
</html>

css文件如下所示：

代码语言：javascript
复制
.crossword-board-container {
  position: relative;
  background: #FFFFFF;
}

.crossword-board {
  position: absolute;
  z-index: 1;
  background: transparent;
  border: 1px solid #000000;
  width: 400px;
  height: 400px;
  display: grid;
  grid-template: repeat(6, 16.666667%)/repeat(6, 16.666667%);
  list-style-type: none;
  padding: 0;
  margin: 0 auto;
}

.crossword-board__item {
  border: 1px solid #000000;
  background: transparent;
  position: relative;
  z-index: 100;
  text-align: center;
  font-size: 20px;
  font-weight: bold;
  text-transform: uppercase;
}
.crossword-board__item:active, .crossword-board__item:focus {
  background: #FFFF74;
  border: 1px solid #000000;
  outline: 1px solid #000000;
}

.crossword-board__item--blank {
  background: #000000;
  border: 1px solid #000000;
  outline: 1px solid #000000;
}

.crossword-board--labels {
  position: absolute;
  z-index: 60;
}

.crossword-board__item-label {
  position: relative;
}

.crossword-board__item-label-text {
  position: absolute;
  top: 2px;
  left: 2px;
  font-size: 12px;
  line-height: 1;
}

.crossword-board__item-label--1 {
  grid-column: 1/1;
}

.crossword-board__item-label--2 {
  grid-column: 1/1;
  grid-row: 4/4;
}

.crossword-board--highlight {
  position: absolute;
  z-index: 50;
}

.crossword-board__item-highlight {
  background: #9AFF67;
  display: grid;
  opacity: 0;
  -webkit-transition: opacity 0.3s linear;
  transition: opacity 0.3s linear;
}

/***********************************************************/
/** ACROSS ANSWERS HIGHLIGHTING START                      */
/***********************************************************/
.crossword-board__item-highlight--across-1 {
  grid-column: 1/7;
}

.crossword-board__item-highlight--across-2 {
  grid-column: 1/6;
  grid-row: 4;
}

#item1-1:valid ~ #item1-2:valid ~ #item1-3:valid ~ #item1-4:valid ~ #item1-5:valid ~ #item1-6:valid
~ .crossword-board--highlight .crossword-board__item-highlight--across-1 {
  opacity: 1;
}

#item4-1:valid ~ #item4-2:valid ~ #item4-3:valid ~ #item4-4:valid ~ #item4-5:valid
~ .crossword-board--highlight .crossword-board__item-highlight--across-2 {
  opacity: 1;
}

/***********************************************************/
/** ACROSS ANSWERS HIGHLIGHTING END                        */
/***********************************************************/
/***********************************************************/
/** DOWN ANSWERS HIGHLIGHTING START                        */
/***********************************************************/
.crossword-board__item-highlight--down-1 {
  grid-column: 1;
  grid-row: 1/7;
}

#item1-1:valid ~ #item2-1:valid ~ #item3-1:valid ~ #item4-1:valid ~ #item5-1:valid ~ #item6-1:valid
~ .crossword-board--highlight .crossword-board__item-highlight--down-1 {
  opacity: 1;
}

/***********************************************************/
/** DOWN ANSWERS HIGHLIGHTING END                          */
/***********************************************************/
#checkvaliditems:checked ~ .crossword-board-container .crossword-board__item:valid {
  background: #9AFF67;
}

.crossword-clues {
  position: absolute;
  top: 0px;
  left: 400px;
  width: 340px;
}

.crossword-clues__list {
  margin: 0 0 0 20px;
  padding: 0;
  display: inline-block;
  vertical-align: top;
}

.crossword-clues__list-title {
  font-weight: bold;
  padding: 4px;
}

.crossword-clues__list-item {
  font-size: 12px;
  margin: 0;
  padding: 4px;
}
.crossword-clues__list-item:before {
  content: attr(data-number) ". ";
}
#item1-1:active ~ .crossword-clues .crossword-clues__list-item--across-1,
#item1-1:focus ~ .crossword-clues .crossword-clues__list-item--across-1,
#item1-1:hover ~ .crossword-clues .crossword-clues__list-item--across-1 {
  background: #FFFF74;
}
#item1-2:active ~ .crossword-clues .crossword-clues__list-item--across-1,
#item1-2:focus ~ .crossword-clues .crossword-clues__list-item--across-1,
#item1-2:hover ~ .crossword-clues .crossword-clues__list-item--across-1 {
  background: #FFFF74;
}
#item1-3:active ~ .crossword-clues .crossword-clues__list-item--across-1,
#item1-3:focus ~ .crossword-clues .crossword-clues__list-item--across-1,
#item1-3:hover ~ .crossword-clues .crossword-clues__list-item--across-1 {
  background: #FFFF74;
}
#item1-4:active ~ .crossword-clues .crossword-clues__list-item--across-1,
#item1-4:focus ~ .crossword-clues .crossword-clues__list-item--across-1,
#item1-4:hover ~ .crossword-clues .crossword-clues__list-item--across-1 {
  background: #FFFF74;
}
#item1-5:active ~ .crossword-clues .crossword-clues__list-item--across-1,
#item1-5:focus ~ .crossword-clues .crossword-clues__list-item--across-1,
#item1-5:hover ~ .crossword-clues .crossword-clues__list-item--across-1 {
  background: #FFFF74;
}
#item1-6:active ~ .crossword-clues .crossword-clues__list-item--across-1,
#item1-6:focus ~ .crossword-clues .crossword-clues__list-item--across-1,
#item1-6:hover ~ .crossword-clues .crossword-clues__list-item--across-1 {
  background: #FFFF74;
}
#item4-1:active ~ .crossword-clues .crossword-clues__list-item--across-2,
#item4-1:focus ~ .crossword-clues .crossword-clues__list-item--across-2,
#item4-1:hover ~ .crossword-clues .crossword-clues__list-item--across-2 {
  background: #FFFF74;
}
#item4-2:active ~ .crossword-clues .crossword-clues__list-item--across-2,
#item4-2:focus ~ .crossword-clues .crossword-clues__list-item--across-2,
#item4-2:hover ~ .crossword-clues .crossword-clues__list-item--across-2 {
  background: #FFFF74;
}
#item4-3:active ~ .crossword-clues .crossword-clues__list-item--across-2,
#item4-3:focus ~ .crossword-clues .crossword-clues__list-item--across-2,
#item4-3:hover ~ .crossword-clues .crossword-clues__list-item--across-2 {
  background: #FFFF74;
}
#item4-4:active ~ .crossword-clues .crossword-clues__list-item--across-2,
#item4-4:focus ~ .crossword-clues .crossword-clues__list-item--across-2,
#item4-4:hover ~ .crossword-clues .crossword-clues__list-item--across-2 {
  background: #FFFF74;
}
#item4-5:active ~ .crossword-clues .crossword-clues__list-item--across-2,
#item4-5:focus ~ .crossword-clues .crossword-clues__list-item--across-2,
#item4-5:hover ~ .crossword-clues .crossword-clues__list-item--across-2 {
  background: #FFFF74;
}
#item1-1:active ~ .crossword-clues .crossword-clues__list-item--down-1,
#item1-1:focus ~ .crossword-clues .crossword-clues__list-item--down-1,
#item1-1:hover ~ .crossword-clues .crossword-clues__list-item--down-1 {
  background: #FFFF74;
}
#item2-1:active ~ .crossword-clues .crossword-clues__list-item--down-1,
#item2-1:focus ~ .crossword-clues .crossword-clues__list-item--down-1,
#item2-1:hover ~ .crossword-clues .crossword-clues__list-item--down-1 {
  background: #FFFF74;
}
#item3-1:active ~ .crossword-clues .crossword-clues__list-item--down-1,
#item3-1:focus ~ .crossword-clues .crossword-clues__list-item--down-1,
#item3-1:hover ~ .crossword-clues .crossword-clues__list-item--down-1 {
  background: #FFFF74;
}
#item4-1:active ~ .crossword-clues .crossword-clues__list-item--down-1,
#item4-1:focus ~ .crossword-clues .crossword-clues__list-item--down-1,
#item4-1:hover ~ .crossword-clues .crossword-clues__list-item--down-1 {
  background: #FFFF74;
}
#item5-1:active ~ .crossword-clues .crossword-clues__list-item--down-1,
#item5-1:focus ~ .crossword-clues .crossword-clues__list-item--down-1,
#item5-1:hover ~ .crossword-clues .crossword-clues__list-item--down-1 {
  background: #FFFF74;
}
#item6-1:active ~ .crossword-clues .crossword-clues__list-item--down-1,
#item6-1:focus ~ .crossword-clues .crossword-clues__list-item--down-1,
#item6-1:hover ~ .crossword-clues .crossword-clues__list-item--down-1 {
  background: #FFFF74;
}
#item1-1:valid ~ #item1-2:valid ~ #item1-3:valid ~ #item1-4:valid ~ #item1-5:valid ~ #item1-6:valid
~ .crossword-clues .crossword-clues__list-item--across-1 {
  background: #9AFF67;
}

#item4-1:valid ~ #item4-2:valid ~ #item4-3:valid ~ #item4-4:valid ~ #item4-5:valid
~ .crossword-clues .crossword-clues__list-item--across-2 {
  background: #9AFF67;
}

#item1-1:valid ~ #item2-1:valid ~ #item3-1:valid ~ #item4-1:valid ~ #item5-1:valid ~ #item6-1:valid
~ .crossword-clues .crossword-clues__list-item--down-1 {
  background: #9AFF67;
}

.crossword-complete {
  position: absolute;
  z-index: 1000;
  top: 110%;
  left: 0%;
  font-size: 24px;
  line-height: 1;
  color: red;
  width: 150%;
  opacity: 0;
  -webkit-transition: opacity 0.3s ease-in-out;
  transition: opacity 0.3s ease-in-out;
}

#item1-1:valid ~ #item1-2:valid ~ #item1-3:valid ~ #item1-4:valid ~ #item1-5:valid ~ #item1-6:valid ~
#item2-1:valid ~
#item3-1:valid ~
#item4-1:valid ~ #item4-2:valid ~ #item4-3:valid ~ #item4-4:valid ~ #item4-5:valid ~
#item5-1:valid ~
#item6-1:valid ~ .crossword-complete {
  opacity: 1;
}

#checkvaliditems {
  background: #9AFF67;
  cursor: pointer;
  position: absolute;
  top: 35px;
  left: 37px;
}

[for="checkvaliditems"] {
  padding: 10px 10px 10px 40px;
  margin: 20px;
  display: inline-block;
  background: #9AFF67;
  cursor: pointer;
}

正如您所注意到的，没有使用箭头键在网格中导航的机制。我也希望有一种方法来切换从横向到纵向的线索。我认为这将需要javascript的键码功能，但我不知道如何构建它。有什么需要帮忙的吗？

javascript
html
jquery
css
EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2020-06-10 14:56:04

下面是如何在Jquery 3.5中使用箭头键移动输入焦点。

代码语言：javascript
复制
$(window).on("load.crossword", function(event){
  crossword = {};
  crossword.squares = $("input.crossword-board__item");
  $(document).on("keyup.crossword", function(event){
    var element = $(".crossword-board__item:focus");
    if(element.length > 0){
      var coord = element.attr("id").split("-").map(function(value, index){
        return parseInt(/\d/.exec(value));
      });
      switch(event.which){
        case 37: //left arrow
          element = element.prevAll("input.crossword-board__item").get(0) || element;
          break;
        case 38: //up arrow
          element = element.prevAll("input.crossword-board__item#item"+(coord[0]-1)+"-"+coord[1]).get(0) || element.prevAll("input.crossword-board__item[id^=item"+(coord[0]-1)+"]").last().get(0) || element
          break;
        case 39: //right arrow
          element = element.nextAll("input.crossword-board__item").get(0) || element;
          break;
        case 40: //down arrow
          element = element.nextAll("input.crossword-board__item#item"+(coord[0]+1)+"-"+coord[1]).get(0) || element.nextAll("input.crossword-board__item[id^=item"+(coord[0]+1)+"]").last().get(0) || element
          break;
      }
    }else{
      element = crossword.squares.first().get(0);
    }
    element.select();
  });
});

我不确定你所说的“从横向切换到下行线索”是什么意思，因为它可能是在一个既有横向线索又有下行线索的正方形中。我会在澄清后更新答案。

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/62291987

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档