我想使用输入使上面的效果生效。无论我在输入框中输入什么,我都只能更改文本颜色,而不是特定的字母。我想让特定字母的颜色改变我在输入框上写的内容。例如,如果我在输入框中输入“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>
答案 0 :(得分: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()
轻松解决)。它还会搜索所有出现的字母,因此它会突出显示与您输入的特定字母匹配的所有字母。因此,您需要额外的逻辑来仅突出显示以前未突出显示的单个字母。
答案 1 :(得分:0)
<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
在此演示中,您可以同时使用大写和小写字母。