3

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('street_1');
street_1.style.color = "red";

Which changes the color of all the characters. Then I tried using:

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

which of course didn't work since .style as I learned only works for the entire field and not just the value.

Since im completely new to JS I really have no idea how to approach this.

Metal Mathematician
  • 388
  • 1
  • 3
  • 15

5 Answers5

4

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/

Muhammad Hamada
  • 725
  • 5
  • 13
  • Check the fiddle, it's working, and maybe you forgot that line `var span = document.querySelector('span');` – Muhammad Hamada Jul 21 '17 at 09:35
  • 1
    It's slow, text highlight does not show, cursor does not show and inserting text at a cursor position does not work properly. Probably the only way to implement this properly is with a content editable div. – Maciej Krawczyk Nov 25 '21 at 16:32
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)

mtizziani
  • 956
  • 10
  • 23
1

Note: If I explicitly need an <input> field and not just user-editable text, this solution won't work!

It is a quite old question, but maybe someone finds this solution helpful. It uses the contenteditable tag, to allow the user to type / change text in an normal HTML element and JS to check and color the text.

The field check can, for example, also be done with "onkeyup" for immediate feedback to the user, but this will also reset the text cursor to the beginning of the field.

HTML:

<a id="sample_id" onblur="color_overlength_func('sample_id', 20)" contenteditable="true">Some Text</a>

JS:

function color_overlength_func(textfield_id, max_length) {
  let text_temp = document.getElementById(textfield_id).innerHTML;
  if (text_temp.length >= max_length) {
    let text_OK = text_temp.substr(0, max_length);
    let text_to_long = text_temp.substr(max_length);
    document.getElementById(textfield_id).innerHTML = "" + text_OK + "<em style='color:red;'>" + text_to_long + "</em>";
  }
}

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

Chrischen
  • 11
  • 2
0

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

Commander Alchemy
  • 41
  • 7
-2

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>
DPS
  • 943
  • 11
  • 22