Как изменить цвет в указанном диапазоне c текста в InputText

Question

У меня есть проблема, и я охотился за ней, и пока ничего ...

Мне нужно изменить цвет текста в textInput, например, я набираю и часть моего текст должен быть другого цвета, я в основном хотел применить более одного стиля с разными интервалами, используя TextInput

Я использую собственный метод TextSput onSelectionChange для получения начального и конечного интервалов, есть ли возможность изменить текст с интервалами?

Не знаю, удалось ли мне каким-либо образом уточнить, но я здесь для вас, если вам нужна дополнительная информация, я буду благодарен, если вы мне поможете

Вот изображение с примером больше или меньше, чем мне нужно.

Спасибо.

Пример

Answer 1

Итак, есть пара способов достижения желаемого эффекта, который вы описали выше, но какой вы используете, немного зависит от вашего варианта использования. В приведенном выше примере они, вероятно, используют функцию для разделения ввода на основе положения символа @ в текстовой строке и оборачивают одну или обе строки разделения в теги span, чтобы нацелить текст с указанием c стиль

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. Супер грубый пример с использованием basi c 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>