主页 / 问题 / 1227126
Accepted
Руслан Мамедов
Asked:2022-01-05 00:46:32 +0000 UTC2022-01-05 00:46:32 +0000 UTC

JS中不正确的按键拦截

  • 772

在我的程序中，我想在用户输入所需文本时调用警报函数。一切正常，只有我被迫多输入 1 个字符。例如，除了输入 HEALTHY 之外，我还必须再按 1 个键（任意）。这是代码：

let textBlock = document.getElementById("textBlock");
let textPlace = document.getElementById("textPlace");


function keyHandler(e) {
    let len = textPlace.value.length;
    if (textPlace.value === textBlock.textContent) {
        alert("Ты победил!");
    }
    else if (textPlace.value != textBlock.textContent.slice(0, len)){
        e.target.style.backgroundColor = "red";
    }   
    else {
        e.target.style.backgroundColor = "white";
    }
    
}

textPlace.addEventListener("keydown", keyHandler);
javascript

3 个回答

  1. Best Answer

    改为进行keydown释放密钥的处理。keyup

    因为否则，事件会触发，但在触发时，文本字段中还没有任何内容。只是处理事件，仅此而已。

    • 3

  2. 事件发生时'keydown'，该字段的内容尚未更改，尚未插入新字符。尝试使用 event 'keyup'，甚至更好的 event 'input'（然后它会起作用，例如，当从缓冲区粘贴而不使用键盘时）。

    • 2

  3. 如果您想使用keydown，请注意它会在有<input>时间处理击键之前触发（顺便说一下，也可以取消此按键，这样<input>根本就不会收到任何信息）。

    但是您可以自己将最后一个键的字母添加到结果中。

    而且我还建议用alert()更现代的东西（在许多浏览器中存在错误）替换一个在任何地方都可以使用的东西，比如<dialog>.

    let textBlock = document.getElementById("textBlock");
let textPlace = document.getElementById("textPlace");


function keyHandler(e) {
  console.clear();
  console.log(`Была нажата клавиша "${e.key}", каретка в позиции ${e.target.selectionStart}`);
  const value = textPlace.value;
  const caret = e.target.selectionStart;
  // новоеЗначение = значениеДоКаретки + буква + значениеПослеКаретки
  const newValue = value.substr(0,caret)+e.key+value.substr(caret);
  let len = value.length;
  if (newValue.trim() === textBlock.textContent.trim()) {
    window.requestAnimationFrame(() => {
      // А вот тут, мои дорогие, значение <input> будет уже с буквой
      // И если сделать проверку здесь, то можно не заморачиваться 
      // ручной вставкой буквы в значение <input>
      console.log('значение в input :', textPlace.value);
      if(textPlace.value.trim() === textBlock.textContent.trim()){
        openDialog();
      }
    });
  } else if (textPlace.value != textBlock.textContent.slice(0, len)) {
    e.target.style.backgroundColor = "red";
  } else {
    e.target.style.backgroundColor = "white";
  }

}

function openDialog() {
  let dialog = document.querySelector('#win-dialog');
  if (dialog.showModal) {
    dialog.showModal();
  } else {
    dialog.show();
  }
}

textPlace.addEventListener("keydown", keyHandler);
    * {
  box-sizing: border-box;
}

#textBlock {
  border: 2px dashed #800;
  margin: .5rem;
  padding: 1rem;
  font-size: 2.5rem;
}

#textPlace {
  border: 2px dashed #800;
  margin: .5rem;
  padding: 1rem;
  font-size: 2.5rem;
  width: calc(100% - 1rem);
}
dialog { text-align: center; }
dialog button { padding: 0.5rem 2rem 0.5rem 2rem };
    <p id=textBlock>Привет</p>
<p><input id=textPlace type=text value="" /></p>

<dialog id="win-dialog">
  <h3>Ты победил</h3>
  <button onclick="this.closest('dialog').close()">OK</button>
</dialog>

    • 1

相关问题