按条件着色 contenteditable div 文本字段中的字母答案

【问题标题】：Colorize letters in contenteditable div textfield by condition按条件着色 contenteditable div 文本字段中的字母
【发布时间】：2016-09-18 06:15:04
【问题描述】：

我想为记忆游戏创建一个输入字段，其中每个正确的字母（纯文本）显示为绿色，每个错误的字母在输入字段内显示为红色。

必须输入的单词以字符串形式提供，因此我可以将输入与解决方案进行比较。

如何根据错误（红色）或正确（绿色）将输入字段中的每个字母设置为不同的颜色？

我找到了this solution 的随机颜色，但我并没有真正得到转移到我的案例中。

【问题讨论】：

你到底为什么要这么做？但如果这就是你想要的，那么到目前为止你尝试过什么？
这是一种记忆游戏……不涉及敏感数据。我用“密码”这个词来说明这个想法。

标签： javascript html css meteor

【解决方案1】：

不幸的是，没有简单、优雅的方式来实现您想要的。我所说的优雅是指 CSS。（有::first-letter 伪元素，但没有::n-th-letter :( 这可能会打开很多可能性）。最好的办法是用span 包裹你的每个字母，然后对它们应用颜色根据一定的条件。

abcd

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');
  };
});

Check it out on jsfiddle.

【讨论】：

【解决方案2】：

这只是根据匹配决定哪种颜色（红色/绿色）的问题 - 这是您提到的 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");
  });
});

【讨论】：