javascript - 实时验证字母并对其进行操作

Question

我有一个带有 contenteditable 的 div，我正在尝试操作这个 div 的数组，以根据索引检查其中写入的每个字母是否与另一个文本上的字母相同。

验证已完成，我可以检查一下，我的问题是，如果字母未通过验证，我需要将字母颜色更改为红色。我在插入我想要的类的跨度时遇到问题。

有人有什么建议吗？

代码如下:

 timer.addEventListener('secondsUpdated', function (e) {
    $('#countdown .values').html(timer.getTimeValues().toString(['minutes', 'seconds']));

    if ($('.true-textarea').contents().get(0)) {
      var textResult = $(".true-textarea").contents().get(0).nodeValue;
      var textSize = textResult().length - 1;
    }

    $(".true-textarea").on("keypress", function(e) {
      var c = String.fromCharCode(e.which);
      e.preventDefault();

      $(".true-textarea").html("");

      if (c != textFake[textSize]) {
        $(".true-textarea").addClass("red-border");
        cls = "color-red";
      } else {
        cls = "color-purple";
        $(".true-textarea").removeClass("red-border");
      }

      console.log('result', textResult);
      console.log('size', textSize)

      res += "<span class='"+cls+"'>"+c+"</span>";
      cls = "";

      $(".true-textarea").html(res);
   });
  });

Answer 1

所以经过几个小时的尝试，我想出了这段代码。

使用了一些我在互联网上看到的示例，修复了一些问题，并且它正在使用以下代码:

function focusAtEnd(el) {
    el.focus();
    if (typeof window.getSelection != "undefined"
      && typeof document.createRange != "undefined") {
      var range = document.createRange();
      range.selectNodeContents(el);
      range.collapse(false);
      var sel = window.getSelection();
      sel.removeAllRanges();
      sel.addRange(range);

    } else if (typeof document.body.createTextRange != "undefined") {
      var textRange = document.body.createTextRange();
      textRange.moveToElementText(el);
      textRange.collapse(false);
      textRange.select();
    }
  }

  $('.true-textarea').unbind();
  $('.true-textarea').focus();

  timer.start({countdown: true, startValues: {seconds: 60}});

  $('#countdown .values').html(timer.getTimeValues().toString(['minutes', 'seconds']));

  var res = "", cls = "";


  textResult.on("keypress", function(e){

    textResult.find('br').remove();

    var c = String.fromCharCode(e.which);
    e.preventDefault();

    res = textResult.html();

    textSize = textResult.text().length;

    if (c === textFake[textSize]) {
      cls = "color-purple";
    } else {
      cls = "color-red";
    }

    res += "<span class='"+cls+"'>"+c+"</span>";

    var del = false;

    var lastFocused;

    cls = "";

    textResult.html(res);

    focusAtEnd($(this).get(0));
  })