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] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

如何将字符串的一部分更改为 JSX 元素?

如何将字符串的一部分提取到变量中?

如何将字符串的一部分捕获到向量中

如何将PChar的一部分提取到字符串中?

如何将字符串的一部分存储到字典中

如何仅匹配Javascript中的字符串的一部分或包含的字符串

如何仅将字符串的一部分呈现为HTML

在vuejs中仅将字符串的一部分加粗

更改仅知道字符串一部分的数组中值的一部分

如何将Tkinter变量打印为字符串的一部分?

如何将字符串的一部分转换为整数?

如何将字符串的一部分转换为斜体?

如何将字符串的一部分提取到chracter?

如何将查询结果显示为字符串的一部分?

如何在laravel 5.2中仅显示字符串的一部分?

如何将字符串的一部分从列复制到熊猫的新列中

如何更改列中的字符串值,保存其中的一部分?

Python re.sub将字符串的一部分更改为ascii

如何在javascript中的特定字符串之后更改句子的一部分

如何将字符串的一部分读取为较小的字符串

如何合并JSON值中的字符串,仅保留一部分字符串?

如何在JavaScript中的“:”之前删除字符串的一部分?

如何在JavaScript中获取字符串的最后一部分?

如何在JavaScript中删除字符串的最后一部分?

如何在javascript中替换字符串的一部分

使用VLOOKUP Excel仅匹配输入字符串的一部分

我可以更改一部分字符串的字体颜色吗?

使用sed仅更改子字符串的一部分

如何仅更改具有变量值的字符串的一部分