JavaScript：如何将颜色更改为输入字段中字符串的一部分？

我有一个输入字段，我想让字符在第10个符号后变成红色

到目前为止，我已经：

var street_1 = document.getElementById('street_1');
street_1.style.color = "red";

这将更改所有字符的颜色。然后我尝试使用：

street\u 1.value.substring（10100.style.color=“red”

当然，从
.style
开始，它就不起作用了，正如我所了解的那样，它只适用于整个字段，而不仅仅是值

因为我对JS完全陌生，我真的不知道如何处理这个问题。
你可以做一个子字符串并附加一个像span这样的元素，然后直接用css或JS将span作为目标。
你可以做一个子字符串并附加一个像span这样的元素，然后直接用css或JS将span作为目标。
在html中，你不能在输入字段的值，因为它始终是一个简单字符串，而不是html元素。因此，您只能定义输入元素和完整文本的颜色

不可能

是标记文本的唯一方法

什么是解决方案，定义一个简单的div标记，在其中写入输入字段的值，并通过使用span标记和设置一个类来标记该div标记中的文本

编辑：

最佳实践是，只需在输入字段上显示一个红色边框，并通过弹出窗口告诉用户其输入有什么问题（例如bootstrap modals或jquery-confirm.js）
在html中，您不能在输入字段的值中定义子元素，因为它始终是一个简单的字符串，而不是html元素。因此，您只能定义输入元素和完整文本的颜色

不可能

是标记文本的唯一方法

什么是解决方案，定义一个简单的div标记，在其中写入输入字段的值，并通过使用span标记和设置一个类来标记该div标记中的文本

编辑：

最佳做法是，只需在输入字段上显示一个红色边框，并通过弹出窗口告诉用户其输入的确切错误（例如bootstrap modals或jquery-confirm.js）
您可以隐藏输入字段，并添加另一个显示其值的
span
元素，如下所示：

HTML:

JS:

var span=document.querySelector（'span'）；
var input=document.querySelector（'input'）；
input.addEventListener（'keydown'，函数（evt）{
var值=evt.target.value；
span.innerHTML=value.substring（0,10）+''+value.substring（10）+''
});

您可以在此处找到一个工作小提琴
您可以隐藏输入字段，并添加另一个显示其值的
span
元素，如下所示：

HTML:

JS:

var span=document.querySelector（'span'）；
var input=document.querySelector（'input'）；
input.addEventListener（'keydown'，函数（evt）{
var值=evt.target.value；
span.innerHTML=value.substring（0,10）+''+value.substring（10）+''
});

你可以在这里找到一把工作小提琴
你可以使用CSS。虽然每次都需要加载javascript库

你是说像这样的

<div>
HELL<span class="red" style="color:red">O</span>
</div>


你好
您可以使用CSS。虽然每次都需要加载javascript库

你是说像这样的

<div>
HELL<span class="red" style="color:red">O</span>
</div>


你好
add
your string
使用csstack将颜色应用到该部分看看这个答案：嗯，这不是只有在我已经知道输入字段中的内容时才起作用吗？add
your string
使用csstack将颜色应用到该部分看看这个答案：嗯，这不是只有在我已经知道输入字段中的内容时才起作用吗？检查小提琴，它正在起作用，也许你忘记了那行
var span=document.querySelector（'span'）检查小提琴，它正在工作，也许你忘记了那行
var span=document.querySelector（'span'）
var span = document.querySelector('span');
var input = document.querySelector('input');

input.addEventListener('keydown', function(evt) {
  var value = evt.target.value;
  span.innerHTML = value.substring(0, 10) + '<span class="red">' + value.substring(10) + '</span>'
});

<div>
HELL<span class="red" style="color:red">O</span>
</div>