gpt4 book ai didi

javascript - 如何更改输入框中特定字母的颜色?

转载 作者:行者123 更新时间:2023-12-04 03:37:01 25 4
gpt4 key购买 nike

enter image description here

我想使用输入实现上面的效果。无论我在输入框中输入什么,我都只能更改文本颜色,而不是特定字母。我想让特定字母的颜色改变我在输入框上写的内容。例如,如果我在输入框中输入“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>

最佳答案

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

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>

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

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

关于javascript - 如何更改输入框中特定字母的颜色?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/66685688/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com