实时验证字母并操纵它们

时间:2017-10-13 01:07:57

标签: javascript jquery html css

我是一个有满足感的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);
   });
  });

1 个答案:

答案 0 :(得分:0)

所以,经过几个小时试图解决这个问题,我想出了这个代码。

使用了我在互联网上看到的一些例子,解决了一些问题,并且使用了以下代码:

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));
  })