在用户使用JavaScript输入X个字符后更改输入子字符串的颜色

我正在尝试输入，用户在其中键入文本。我想做的是：在用户输入10个字符后，他们输入的下一个字符将是另一种颜色。有人知道我能做什么吗

文件
让输入=document.querySelector（“输入”）；
addEventListener（“keyup”，function（））{
如果（input.value.length>10）{
console.log（input.value.substring（10））；
}
})

隐藏输入、onInput事件处理程序、可编辑内容和element.html（）的组合如何。对于输入到contenteditable div中的每个字符，将该字符保存到隐藏输入，然后将contenteditable div的innerHTML设置为隐藏输入当前值的前10个字符+一个包含类名的范围，该范围包含其余字符。

如何组合隐藏输入、onInput事件处理程序、，内容可编辑，以及element.html（）。对于输入到contenteditable div中的每个字符，将该字符保存到隐藏输入，然后将contenteditable div的innerHTML设置为隐藏输入当前值的前10个字符+一个包含类名的范围，该范围包含其余字符。

下面是一个完全实现的示例。该策略与chris的回答中概述的策略相似。基本上，我们使用contenteditable div允许用户输入一些内容。一旦内容超过10个字符，我们将使用一个span来设置所有后续字符的样式

一个问题是，更改可编辑div的HTML（包括附加一个span）将导致光标重置为开头。为了解决这个问题，我使用了代码from将光标设置回末尾

让输入=document.querySelector（“#test”）；
input.addEventListener（“按键”，功能（e）{
如果（e.ctrlKey）返回；
让value=input.innerText；
如果（value.length>10）{
设firstTen=value.substring（0,10）；
让remainingText=value.substring（10）；
//文本可能包含HTML，这可能导致XSS漏洞。
//为了避免这种情况，我们创建了一个span并设置span的innerText，而不是
//直接修改输入的innerHTML。
设span=document.createElement（“span”）；
span.style.color=“红色”；
span.innerText=remainingText；
input.innerText=firstTen；
input.appendChild（span）；
input.focus（）；
setEndOfContenteditable（输入）；
}
document.querySelector（“#测试值”）.value=input.innerText；
});
//从https://stackoverflow.com/a/3866442/11981207
函数setEndOfContenteditable（contentEditableElement）
{
var范围、选择；
if（document.createRange）//Firefox、Chrome、Opera、Safari、IE 9+
{
range=document.createRange（）；//创建一个范围（一个范围与所选内容类似，但不可见）
range.selectNodeContents（contentEditableElement）；//选择具有范围的元素的全部内容
range.collapse（false）；//将范围折叠到终点。false表示折叠到终点而不是起点
selection=window.getSelection（）；//获取选择对象（允许您更改选择）
selection.removeAllRanges（）；//删除所有已做的选择
selection.addRange（range）；//使刚刚创建的范围成为可见的选择
}
else if（document.selection）//IE 8及更低版本
{ 
range=document.body.createTextRange（）；//创建一个范围（范围与所选内容类似，但不可见）
range.moveToElementText（contentEditableElement）；//使用范围选择元素的全部内容
range.collapse（false）；//将范围折叠到终点。false表示折叠到终点而不是起点
range.select（）；//选择范围（使其成为可见选择
}
}

这里是一个完全实现的示例。该策略与chris的回答中概述的策略类似。基本上，我们使用contenteditable div允许用户输入一些内容。一旦内容超过10个字符，我们使用一个span来设置所有后续字符的样式

一个问题是，更改可编辑div的HTML（包括附加一个span）将导致光标重置为开头。为了解决这个问题，我使用了代码from将光标设置回末尾

让输入=document.querySelector（“#test”）；
input.addEventListener（“按键”，功能（e）{
如果（e.ctrlKey）返回；
让value=input.innerText；
如果（value.length>10）{
设firstTen=value.substring（0,10）；
让remainingText=value.substring（10）；
//文本可能包含HTML，这可能导致XSS漏洞。
//为了避免这种情况，我们创建了一个span并设置span的innerText，而不是
//直接修改输入的innerHTML。
设span=document.createElement（“span”）；
span.style.color=“红色”；
span.innerText=remainingText；
input.innerText=firstTen；
input.appendChild（span）；
input.focus（）；
setEndOfContenteditable（输入）；
}
document.querySelector（“#测试值”）.value=input.innerText；
});
//从https://stackoverflow.com/a/3866442/11981207
函数setEndOfContenteditable（contentEditableElement）
{
var范围、选择；
if（document.createRange）//Firefox、Chrome、Opera、Safari、IE 9+
{
range=document.createRange（）；//创建一个范围（一个范围与所选内容类似，但不可见）
range.selectNodeContents（contentEditableElement）；//选择具有范围的元素的全部内容
range.collapse（false）；//将范围折叠到终点。false表示折叠到终点而不是起点
selection=window.getSelection（）；//获取选择对象（允许您更改选择）
selection.removeAllRanges（）；//删除所有已做的选择
selection.addRange（range）；//使刚刚创建的范围成为可见的选择
}
else if（document.selection）//IE 8及更低版本
{ 
范围=document.bo