I'd like to create an input field for a memory game where every correct letter is (in plaintext) displayed green and every incorrect letter is displayed red inside the input field.
我想为一个内存游戏创建一个输入字段，其中每个正确的字母(纯文本)显示为绿色，每个错误的字母在输入字段中显示为红色。
The word that has to be entered is available as a string, so I can compare the input with the solution.
必须输入的单词可以作为字符串使用，因此我可以将输入与解决方案进行比较。
How can I make each letter in the input field a different color based on wrong (red) or right (green)?
如何根据错误(红色)或正确(绿色)使输入字段中的每个字母都具有不同的颜色?
I found this solution for random colors but i don't really get the transfer to my case.
我找到了随机颜色的解但是我并没有得到这个变换。
2 个解决方案
#1
3
It's just a matter of deciding which color (red/green) based on the match - here's a variation of the code from the jsfiddle you referred to:
这只是根据匹配来决定颜色(红色/绿色)的问题——以下是您提到的jsfiddle代码的变化:
var correctString = "abcdefg"; // for example, this should come from your code
$("div").prop("contentEditable", true).blur(function(){
$("#hidden").val($(this).text());
this.innerHTML = "";
var chars = $(this).text().split("");
chars.forEach(function(c,i){
// pick green if characters match, red otherwise
// any "extra" characters are automatically red
var color = ( i < correctString.length && c === correctString.charAt(i) )? "#0F0" : "#F00";
$("<span>").text(this).css({ color: color }).appendTo("div");
});
});
#2
4
Unfortunately there is no easy, elegant way to achieve what you want. And by elegant I mean CSS. (there is the ::first-letter pseudo element, but no ::n-th-letter :( which could've open quite a few posibilities). Your best bet is to wrap each of your letters with a span, and then apply color to them according to a certain condition.
不幸的是，没有简单、优雅的方法来实现你想要的。优雅的CSS。(有:第一个字母的伪元素，但是没有:n- n- letter:(它可以打开相当多的位置)。你最好的办法是把你的每封信都用大跨度包裹起来，然后根据一定的条件给它们涂上颜色。
<span>a</span><span>b</span><span>c</span><span>d</span>
< span > < / span > < span > b < / span > < span > c < / span > < span > d < / span >
var word = 'abcd';
var matches = [0, 1, 1, 0];
$(document).ready(function() {
for(var i = 0; i <= word.length; i++){
$("span").eq(i).css('color', matches[i] ? 'green':'red');
};
});
在jsfiddle查询。
#1
3
It's just a matter of deciding which color (red/green) based on the match - here's a variation of the code from the jsfiddle you referred to:
这只是根据匹配来决定颜色(红色/绿色)的问题——以下是您提到的jsfiddle代码的变化:
var correctString = "abcdefg"; // for example, this should come from your code
$("div").prop("contentEditable", true).blur(function(){
$("#hidden").val($(this).text());
this.innerHTML = "";
var chars = $(this).text().split("");
chars.forEach(function(c,i){
// pick green if characters match, red otherwise
// any "extra" characters are automatically red
var color = ( i < correctString.length && c === correctString.charAt(i) )? "#0F0" : "#F00";
$("<span>").text(this).css({ color: color }).appendTo("div");
});
});
#2
4
Unfortunately there is no easy, elegant way to achieve what you want. And by elegant I mean CSS. (there is the ::first-letter pseudo element, but no ::n-th-letter :( which could've open quite a few posibilities). Your best bet is to wrap each of your letters with a span, and then apply color to them according to a certain condition.
不幸的是，没有简单、优雅的方法来实现你想要的。优雅的CSS。(有:第一个字母的伪元素，但是没有:n- n- letter:(它可以打开相当多的位置)。你最好的办法是把你的每封信都用大跨度包裹起来，然后根据一定的条件给它们涂上颜色。
<span>a</span><span>b</span><span>c</span><span>d</span>
< span > < / span > < span > b < / span > < span > c < / span > < span > d < / span >
var word = 'abcd';
var matches = [0, 1, 1, 0];
$(document).ready(function() {
for(var i = 0; i <= word.length; i++){
$("span").eq(i).css('color', matches[i] ? 'green':'red');
};
});
在jsfiddle查询。