Question

我只是试图创建一个打字测试项目，为此，我正在使用javaScript。我不知道如何解释，但主要要说的是我有一个对象调用 keyTest ，它具有许多属性，其中一个属性称为 wordMatch 其中包含一个数组，并且 createWordObject 方法将该数组填充了许多对象。这些对象看起来像这样：

var keyTest = {
        wordMatch: [
            {
                "word" : "some",
                "match" : false,
                "matchingTime": 0
            },
            {
                "word" : "text",
                "match" : false,
                "matchingTime": 0
            },
            {
                "word" : "in",
                "match" : false,
                "matchingTime": 0
            },
            {
                "word" : "here",
                "match" : false,
                "matchingTime": 0
        },
    ],
}

现在， onkeyup 事件我想一次匹配输入单词和单词属性，如果匹配的话我会更新 match 属性设置为 true 并从事件中获取timpStamp。它对我来说非常完美，但我必须在输入中输入慢速。即使我将输入词与属性词匹配，我也很快输入，它只是将 match属性更新为false或true。 / p>

我不知道我该怎么解释，但是看完这三个图像后，每个人都会明白我真正想说的话。并添加我的项目的链接。see the link

Answer 1

您可以尝试使用正则表达式和文本框的oninput事件处理程序来执行此操作：）

window.onload = () => {
  let keyTest = {
    wordMatch: [
      {
        word: "some",
        match: false,
        matchingTime: 0
      },
      {
        word: "text",
        match: false,
        matchingTime: 0
      },
      {
        word: "in",
        match: false,
        matchingTime: 0
      },
      {
        word: "here",
        match: false,
        matchingTime: 0
      }
    ]
  };
  // the date object where we could get all our date related stuff
  let currDate = new Date();
  // our input field
  let textbox = document.getElementById('word-box');
  // our regex string
  let regEx = '';
  // the variable that will hold all the matched words found in the input field
  let matches = '';
  // the index of a given matched word in the wordMatch array
  let wordInd = -1;
  // build the regex string we're going to use to check if any of the words are keyed in
  keyTest.wordMatch.forEach((item, i) => {
    regEx += `${item.word}${i < keyTest.wordMatch.length - 1 ? "|" : ""}`;
  });
  // build the actual regExp which would be /(word 1|word 2|word 3|word 4)/g
  regEx = new RegExp(`(${regEx})`, 'g');
  // have our textbox listen for new inputs
  textbox.addEventListener("input", function() {
    // check the input field's value for any matches
    matches = this.value.match(regEx);
    if (matches) {
      matches.forEach(word => {
        // get the index of the word in the wordMatch array
        wordInd = keyTest.wordMatch.findIndex(words => words.word == word);
        // set the match property
        keyTest.wordMatch[wordInd].match = true;
        // set the matching date property
        keyTest.wordMatch[wordInd].matchingTime = `${currDate.getMonth() +
          1}/${currDate.getDate()}/${currDate.getFullYear()} @ ${currDate.getHours()}:${currDate.getMinutes()}`;
      });
    }
    
    // just to show that it does indeed set everything correctly
    matches ? console.log(keyTest.wordMatch[keyTest.wordMatch.findIndex(words => words.word == matches[matches.length - 1])]) : '';
  });
};

<input type="text" id="word-box"/>

此外，这是working example以及对regExp和oninput的引用：）

Javascript与快速输入中的输入值不匹配

1 个答案: