1

我正在尝试创建一个填字游戏，并且我希望在我在框中键入内容后立即将焦点传递到以下框。我也想让它在我删除时倒退。基本上，我希望这两个部分中的每一个都被那个黑框分隔，类似于单个文本输入。

.row {
    display: flex;
    margin-left: 1.2em;
}

input[type="text"] {
    width: 1em;
    height: 1em;
    font: 700 2em Chiller;
    text-align: center;
    vertical-align: middle;
    padding: 1px;
    margin: -1px;
    text-transform: capitalize;
    border: 2px solid black;
}
<div class="row">
            <input type="text" maxlength="1" autocomplete="off" />
            <input type="text" maxlength="1" autocomplete="off" />
            <input type="text" maxlength="0" autocomplete="off" style="background-color:black"/>
            <input type="text" maxlength="1" autocomplete="off" />
            <input type="text" maxlength="1" autocomplete="off" />
            <input type="text" maxlength="1" autocomplete="off" />
            <input type="text" maxlength="1" autocomplete="off" />
            <input type="text" maxlength="1" autocomplete="off" />
        </div>

4

2 回答 2

1

您可以将 eventListenr 添加到每个输入中，然后处理焦点元素。将 blackbox 元素更改为 div 并提供所需的属性。

document.querySelectorAll(


var nodes_input=document.querySelectorAll(".row input");
for(let i=0;i<nodes_input.length;i++){
  nodes_input[i].addEventListener("keyup", ()=>{switch_next(event,i)});
}
function switch_next(ev,i){
  let k=ev.which,n=false;
  if(k>64&&k<91){
    n=Math.min(nodes_input.length-1,++i);
    ev.target.value=ev.key;
  }else{ 
    ev.target.value="";
    if(k==8){
      n=Math.max(0,--i);
    }else{
    
    }
  }
  if(n!==false){
   nodes_input[n].focus();
  }
}
.row {
    display: flex;
    margin-left: 1.2em;
}

input[type="text"],.black-box {
    width: 1em;
    height: 1em;
    font: 700 2em Chiller;
    text-align: center;
    vertical-align: middle;
    padding: 1px;
    margin: -1px;
    text-transform: capitalize;
    border: 2px solid black;
}
.black-box{
  background-color:black;
}
<div class="row">
            <input type="text" maxlength="1" autocomplete="off" />
            <input type="text" maxlength="1" autocomplete="off" />
            <div type="text" maxlength="0" autocomplete="off" class="black-box"></div>
            <input type="text" maxlength="1" autocomplete="off" />
            <input type="text" maxlength="1" autocomplete="off" />
            <input type="text" maxlength="1" autocomplete="off" />
            <input type="text" maxlength="1" autocomplete="off" />
            <input type="text" maxlength="1" autocomplete="off" />
        </div>

)

于 2020-04-08T12:07:47.737 回答
0

试试这个

我在行尾下降到下一行

我会让你自己修复 prev 8 - 这不是微不足道的。我下面的代码现在无法处理

const findPrev = tgt => {
  let prev = tgt.previousElementSibling;
  if (prev) {
    if (prev.maxLength === 0) prev = findPrev(prev);
  } else {
    const parent = tgt.closest("div");
    if (parent.previousElementSibling && parent.previousElementSibling.classList.contains("row")) {
      prev = parent.previousElementSibling.querySelector("input:last-child");
      while (prev && prev.maxLength === 0) prev = findPrev(prev);
    }
  }
  return prev; // can be undefined
};


const findNext = tgt => {
  let next = tgt.nextElementSibling;
  if (next) {
    if (next.maxLength === 0) next = findNext(next);
  } else {
    const parent = tgt.closest("div");
    if (parent.nextElementSibling && parent.nextElementSibling.classList.contains("row")) {
      next = parent.nextElementSibling.querySelector("input");
      while (next && next.maxLength === 0) next = findNext(next);
    }
  }
  return next; // can be undefined
};
window.addEventListener("load", function() {
  let bs = false
  document.getElementById("crosswords").addEventListener("keydown", function(e) {
    if (e.which === 8) bs=true
  })
  document.getElementById("crosswords").addEventListener("input", function(e) {  
    const tgt = e.target;
    
    if (tgt.tagName === "INPUT" && tgt.type === "text") {
      let letter = bs ? findPrev(tgt) : findNext(tgt);
      if (letter) {
        letter.focus()
        letter.select()
      }
    }
    bs=false;
  });
})
.row {
  display: flex;
  margin-left: 1.2em;
}

input[type="text"] {
  width: 1em;
  height: 1em;
  font: 700 2em Chiller;
  text-align: center;
  vertical-align: middle;
  padding: 1px;
  margin: -1px;
  text-transform: capitalize;
  border: 2px solid black;
}
<div id="crosswords">
  <div class="row">
    <input type="text" maxlength="1" autocomplete="off" />
    <input type="text" maxlength="1" autocomplete="off" />
    <input type="text" maxlength="0" autocomplete="off" style="background-color:black" />
    <input type="text" maxlength="1" autocomplete="off" />
    <input type="text" maxlength="1" autocomplete="off" />
    <input type="text" maxlength="1" autocomplete="off" />
    <input type="text" maxlength="1" autocomplete="off" />
    <input type="text" maxlength="1" autocomplete="off" />
  </div>
  <div class="row">
    <input type="text" maxlength="1" autocomplete="off" />
    <input type="text" maxlength="1" autocomplete="off" />
    <input type="text" maxlength="1" autocomplete="off" />
    <input type="text" maxlength="0" autocomplete="off" style="background-color:black" />
    <input type="text" maxlength="1" autocomplete="off" />
    <input type="text" maxlength="1" autocomplete="off" />
    <input type="text" maxlength="1" autocomplete="off" />
    <input type="text" maxlength="0" autocomplete="off" style="background-color:black" />
  </div>
  <div class="row">
    <input type="text" maxlength="0" autocomplete="off" style="background-color:black" />
    <input type="text" maxlength="1" autocomplete="off" />
    <input type="text" maxlength="1" autocomplete="off" />
    <input type="text" maxlength="1" autocomplete="off" />
    <input type="text" maxlength="1" autocomplete="off" />
    <input type="text" maxlength="1" autocomplete="off" />
    <input type="text" maxlength="1" autocomplete="off" />
    <input type="text" maxlength="1" autocomplete="off" />
  </div>
</div>

于 2020-04-08T10:58:40.073 回答