Question

我想使用输入使上面的效果生效。无论我在输入框中输入什么，我都只能更改文本颜色，而不是特定的字母。我想让特定字母的颜色改变我在输入框上写的内容。例如，如果我在输入框中输入“hello”，“H”、“E”、“L”、“L”、“O”的颜色变为绿色。下面是我的代码。

  document.addEventListener("input", function() {
    document.getElementById('values').style.color = "#999";
  });

    body {
  font-family: sans-serif;
  color: #222;
}

<body>
   <h1 id="values"><span class="Q">Q</span><span class="W">W</span><span class="R">R</span><span class="T">T</span></h1>
   <input type="text" id="inp">
</body>
</html>

Answer 1

在下面创建了一个小片段来实现我认为你需要的：-

inp.addEventListener("input", function(e) {
  const word = document.getElementById('values');
  [...word.children].forEach((letter) => {
    if (e.target.value.includes(letter.textContent)) {
      letter.style.color = '#999';
    } else {
      letter.style.color = "#222";
    }
  })
});

body {
  font-family: sans-serif;
  color: #222;
}

<body>
  <h1 id="values"><span class="Q">Q</span><span class="W">W</span><span class="R">R</span><span class="T">T</span></h1>
  <input type="text" id="inp">
</body>

</html>

说明 - 我们通过获取 word 元素来获取整个 values，因为它是您的 letters 的父通过单个 span 元素。然后我们迭代单词的 children，即对于每个 letter，我们正在检查它是否包含在我们刚刚输入的 text 中。如果是，请将其样式设置为突出显示颜色，否则设置为默认颜色。

注意 - 目前它区分大小写，所以 q 和 Q 是不同的（可以通过在比较的两边使用 .toUpperCase()/.toLowerCase() 轻松解决）。它还会搜索所有出现的字母，因此它会突出显示与您输入的特定字母匹配的所有字母。因此，您需要额外的逻辑来仅突出显示以前未突出显示的单个字母。

Answer 2

 <script
  src="https://code.jquery.com/jquery-1.12.4.min.js"
  integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ="
  crossorigin="anonymous"></script>

   $(function(){
    $('#inp').on('keyup',function(e){
    var key = e.keyCode || e.which;
    key= String.fromCharCode(key);
    $('.'+key.toString()).css({'color':'red'});
});
});

$(function(){
$('#inp').on('keyup',function(e){
    var key = e.keyCode || e.which;
    if(key != 8 && key != 16)
    {
    key= String.fromCharCode(key);
    $('.'+key.toString()).css({'color':'red'});
    }
});
});

body {
  font-family: sans-serif;
  color: #222;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<html>
<body>
   <h1 id="values"><span class="Q">Q</span><span class="W">W</span><span class="R">R</span><span class="T">T</span></h1>
   <input type="text" id="inp">
</body>
</html>

您可以为此使用 jquery。DEMO

在此演示中，您可以同时使用大写和小写字母。

如何更改输入框中输入的特定字母颜色？

2 个答案: