时间戳

首页 > 解决方案 > 如何在 InputText 中更改特定文本范围内的颜色

javascript - 如何在 InputText 中更改特定文本范围内的颜色

问题描述

我有一个问题，我一直在寻找它，但到目前为止什么都没有......

我需要更改 textInput 中文本的颜色，例如，我正在打字，我的部分文本必须是不同的颜色，我基本上想使用 TextInput 在不同的时间间隔应用多个样式

我使用 TextInput 自己的 onSelectionChange 方法来检索开始和结束间隔，是否有可能从间隔更改文本？

我不知道我是否能以任何方式说清楚，但是如果您需要更多信息，我会在这里为您服务，如果您能帮助我，我将不胜感激

这是一个或多或少比我需要的示例的图像。

谢谢你。

示例

标签： javascriptreactjsreact-nativemobile

解决方案

Soooo 有几种方法可以达到您在上面描述的预期效果，但是您使用哪种方法有点取决于您的用例。对于上面的示例，他们可能使用函数根据文本字符串中 @ 符号的位置拆分输入，并将一个或两个拆分字符串包装在 span 标签中，以针对具有特定样式的文本。

var initial = 'example@somedomain.com';
console.log("Initial String : " + initial);

var splitStrings = initial.split("@");
console.log(splitStrings[0], "@" + splitStrings[1]);

但是，以这种方式使用拆分时，请确保重新添加用于拆分初始字符串的字符。如果您尝试基于索引进行拆分，那么基于字符串字符的索引进行切片以开始新样式将是最佳选择，如果从那时起它是一致的，您可以从调用中省略 endIndex 值动态选择字符串的其余部分。

var initial = "string of a certain character length"
console.log(initial);


var firstHalf = initial.slice(0, 5);
var secondHalf = initial.slice(5);
console.log(firstHalf + secondHalf);

一旦您获得了所需的拆分字符串值，那么只需使用标签将正确的值包装起来以使用 CSS 定位即可。下面使用基本 HTML、JS 和内联样式的超级粗略示例。

function display() {
  var initial = document.getElementById("initial").value;
  var first = initial.slice(0,2)
  var second = initial.slice(2)
  document.getElementById("display").innerHTML = first + '<span style="color:blue">' + second + '</span>'
}
<div id="display"></div>
<input type="text" id="initial">
<button onClick="display();">display</button>

推荐阅读