CODEWITHSUNDEEP
javascript
Metal Mathematician
Metal Mathematician

Reputation: 416

JavaScript: How to change color to only part of the string in an input field?

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.

Upvotes: 5

Views: 19021

Answers (5)

Chrischen
Chrischen

Reputation: 21

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/

Upvotes: 1

DPS
DPS

Reputation: 1003

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>

Upvotes: -2

Muhammad Hamada
Muhammad Hamada

Reputation: 725

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/

Upvotes: 4

mtizziani
mtizziani

Reputation: 1016

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)

Upvotes: 1

Commander Alchemy
Commander Alchemy

Reputation: 41

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

Upvotes: 0

Related Questions