Question

我的代码是将整个输入转换为单色，而不是将单个颜色转换为单个单词。这是我的小提琴，只有红色应用于整个输入。测试输入：嗨你好等。当我清除输入字段时，最后一种颜色应用于第一个字而不是红色。功能是

function func(e){
    var content = text.innerHTML;
    if( e.keyCode === 32){
      text.style.color = colors[i++];
     }
}

这是小提琴：Fiddle Link

Answer 1

不幸的是input标记词不能有不同的颜色，因为文本和输入不是单独的元素，但对于其他元素，您可以将每个单词包装成span并为它们添加样式，即丰富的内容编辑如何运作。

假设你有<p id="paragraph">Here are few words</p>，并且想要为每个单词添加不同的颜色。

您可以split #paragraph的innerText并为每个单词创建范围，并将结果作为#paragraph的innerHTML插入。

这是示例

var paragrapgh = document.getElementById("paragraph");
var words = paragrapgh.innerText.split(" "); // here I am spliting words by space i.e tokenizing it
var colors = ["red","green","blue","pink", "gold", "yellow", "blueviolet"];
var spans = [];

for(var x = 0; x < words.length; x++){
    var color = colors[Math.floor(Math.random()*colors.length)] // geting random color from array;
    var span = "<span style='background-color: " + color + ";'>" + words[x] + "</span>"
    
    spans.push(span);
}

// setting colored spans as paragraph HTML
paragrapgh.innerHTML = spans.join(" ");

<p id="paragraph">Here are few words</p>

此外，您可以对元素使用contenteditable属性，以允许用户在输入时编辑元素的内容。

因此，您可以尝试将contenteditable div与keyup事件一起使用，并制作单词样式。

Answer 2

简单的回答：你不能;样式仅适用于整个输入。如果要实现此目的，则需要一个支持Rich Text Editing的控件。

Answer 3

使用div你可以实现它。以下代码几乎没有问题，如插入位置

＆＃13;

var text = document.getElementById('text');
var newWord = '';
var colors = ["red", "green", "blue", "darkpink"];
var prevValue = '';
var i = 0;
text.addEventListener("keyup", function(event) {
  func(event)
});


function func(e) {
  newWord = newWord + e.key;
  if (e.keyCode === 32) {
    prevValue = text.innerHTML = prevValue + '<span style="color:' + colors[i++] + '">' + newWord + '</span>';
    newWord = '';
    if (i == 3) {
      i = 0;
    }
  }
}

＆＃13;

#text {
  border: 1px solid grey;
  background-color: white;
  width: 200px;
  white-space: nowrap;
  overflow: hidden;
}

＆＃13;

<div id="text" class="highlight" contenteditable="true">
</div>

＆＃13;

如何使用javascript设置不同颜色的每个单词？

3 个答案: