[removed] How to change color to only part of the string in an input field?

Question

I have an input field where I would like to have the characters turn red after the 10th symbol.

So far I have:

var street_1 = document.getElementById         


        

Answer 1

in html you can't define sub elements in the value of input fields because it is allways a simple string and not a html element. so you only can define the color for the input element and the complete text.

<input type="text" value="my <em style='color: red;'>test</em>"> is not possible

<input type="text" value="my test" style="color: red;"> is the only way to mark the text

what can be a sollution, define a simple div tag, write the value of your input filed inside that, and mark the text in that div tag by surrounding with a span tag and setting a class to this

Edit:

best practice is, simply show a red border on the input field and tell the user with a popup what exactly is wrong with his input (bootstrap modals or jquery-confirm.js for excample)

Answer 2

You can hide the input field, and add another span element that displays its value as follows:

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

You can find a working fiddle here https://jsfiddle.net/v127c14p/

Answer 3

You can do a substring and append a element like span and then target the span with css or js directly.

Answer 4

You can use CSS. Although javascript library need to load everytime

you mean something like this

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