Javascript - 更改输入中的某些字符颜色

Question

＆＃13;

＆＃13;

var input = document.getElementById("wordTyped");
var word = document.getElementById("wordGenerated").innerHTML;

window.onload = function() {

  window.onkeydown = submit;

  function submit(evt) {
    if (evt.key == "Enter" && input.value == word) {
      input.value = "";
      input.style.color = "black";

    } else if (evt.key == "Enter" && input.value != word) {

      for (i = 0; i < word.length; i++) {
        // Below is what I'm querying about
        if (input.value[i] != word[i]) {
          input.style.color = "red";
        }
      }
    }
  }
}

＆＃13;

<div id="wordGenerated">illustration</div>
<input id="wordTyped" type="text" />

＆＃13;

＆＃13;

＆＃13;

我不认为我问的问题是可能的，但我想尝试更改与input word字符的颜色>

例如，

wordGenerated：插图

wordTyped：iilustration

第二个＆＃39; i＆＃39;然后在wordTyped中将其颜色更改为Enter

上的红色

我尝试过input.value.style.color[i] = "red"和input.value[i].style.color = "red"，但这些反过来会给出一个未定义的TypeError颜色。

上面的代码将整个输入文本颜色更改为红色。

Answer 1

您只需将字母包裹在span元素中即可。 注意：下面的代码只是一个概念，我没有优化它。 我把优化部分留给了你。 祝你好运。

var input = document.getElementById("wordTyped");
var word = document.getElementById("wordGenerated").innerHTML;

window.onload = function() {

  window.onkeydown = submit;

  function submit(evt) {
    var newWord=document.getElementById("wordGenerated");
        newWord.innerHTML="";
    if (evt.key == "Enter" && input.value == word) {
      input.value = "";
      input.style.color = "black";

    } else if (evt.key == "Enter" && input.value != word) {
      
      for (i = 0; i < input.value.length; i++) {
        // Below is what I'm querying about
        if (input.value[i] != word[i]) {
          var child = document.createElement( "span" );
          child.className='colored';
          child.innerHTML = input.value[i];
          newWord.appendChild( child );
        }
        else {
        var child = document.createElement( "span" );
            child.innerHTML = input.value[i];
            newWord.appendChild( child );
        }
      }
    }
  }
}

.colored {
  color: red;
}

<div id="wordGenerated">illustration</div>
<input id="wordTyped" type="text" />