JavaScript: 如何在输入框中将字符串的一部分改变颜色？

Question

我有一个输入框，希望在第10个字符后将字符变为红色。

目前我已经实现了以下代码：

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

我试图改变所有字符的颜色，使用了以下代码：

street_1.style.color = "red";

但是，这显然不起作用，因为.style只适用于整个字段，而不仅仅是该值。

由于我对JS完全是新手，真的不知道如何解决这个问题。

- Metal Mathematician

---

添加 <em>你的字符串</em> 并使用 CSS 对该部分应用颜色。 - chirag satapara

请查看此答案：链接 - Cylexx

嗯，如果我已经知道输入框中会有什么内容，这个方法才有效吧？ - Metal Mathematician

Answer 1

您可以隐藏输入字段，并添加另一个元素来显示其值，如下所示：

HTML:

<div>
  <input type="text">
  <span class="text"></span>
</div>

CSS（层叠样式表）：

input {
  opacity: 0;
  width: 100%;
}

div {
  position: relative;
  border: 1px solid #000;
}

.text {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}

.red {
  color: red;
}

JS：

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

您可以在此处找到一个可工作的代码示例：https://jsfiddle.net/v127c14p/。

- Muhammad Hamada

---

检查一下这个fiddle，它是正常工作的，也许你忘记了这一行 var span = document.querySelector('span');。 - Muhammad Hamada

它很慢，文本高亮不显示，光标也不显示，并且在光标位置插入文本无法正常工作。可能唯一正确的实现方法是使用可编辑的内容div。 - Maciej Krawczyk

Answer 2

在HTML中，您无法在输入字段的值中定义子元素，因为它始终是一个简单的字符串而不是HTML元素。因此，您只能定义输入元素和完整文本的颜色。

"<input type="text" value="my <em style='color: red;'>test</em>">" 是不可能的。

"<input type="text" value="my test" style="color: red;">" 是标记文本的唯一方式。

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

编辑：

最佳实践是，在输入字段上简单显示红色边框，并使用弹出窗口告诉用户他的输入有什么问题（例如Bootstrap模态或jquery-confirm.js）。

- mtizziani

Answer 3

注意：如果我明确需要一个<input>字段而不仅仅是用户可编辑的文本，则此解决方案将无法工作！

这是一个相当古老的问题，但也许有人会发现这个解决方案有用。 它使用了contenteditable标签，允许用户在普通的HTML元素中输入/更改文本，并使用JS来检查和着色文本。

例如，字段检查还可以使用“onkeyup”进行即时反馈，但这也会将文本光标重置到字段的开头。

HTML：

<a id="sample_id" onblur="color_overlength_func('sample_id', 20)" contenteditable="true">Some Text</a>

JS：

function color_overlength_func(textfield_id, max_length) {
  let text_temp = document.getElementById(textfield_id).innerHTML;
  if (text_temp.length >= max_length) {
    let text_OK = text_temp.substr(0, max_length);
    let text_to_long = text_temp.substr(max_length);
    document.getElementById(textfield_id).innerHTML = "" + text_OK + "<em style='color:red;'>" + text_to_long + "</em>";
  }
}

您可以在这里找到一个可用的fiddle：https://jsfiddle.net/kyh9803c/

- Chrischen

Answer 4

你可以使用子字符串并附加一个像span这样的元素，然后直接使用CSS或JS定位该span。

- Commander Alchemy

Answer 5

你可以使用CSS。虽然JavaScript库需要每次加载。

你的意思是这样的吗？

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

- DPS