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

Jurģis Toms Liepiņš

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

到目前为止，我有：

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

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

street_1.value.substring(10,100).style.color = "red";

这当然不起作用，因为.style据我所知，这仅适用于整个领域，而不仅仅是价值。

因为我对 JS 完全陌生，所以我真的不知道如何解决这个问题。

穆罕默德·阿雷夫

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

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/

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。