Color text in input ( by position )

Question

I need to create an input type having text, of different color .

Ex. first 5 characters in color black and the rest in red

Is this possible with jquery or something ?

By input i mean

<input type="text" value="blackreddddd" />

Thank you.

Any code , that you have tried so far – Jot Dhaliwal Sep 08 '14 at 11:35 — Jot Dhaliwal, Sep 08 '14 at 11:35
What do you mean by "width based color" ? – Jot Dhaliwal Sep 08 '14 at 11:38 — Jot Dhaliwal, Sep 08 '14 at 11:38
@JotDhaliwal he tried Nothing , so he is asking – Pratik Joshi Sep 08 '14 at 11:42 — Pratik Joshi, Sep 08 '14 at 11:42
I don't even know if it's possible – Mistraë Sep 08 '14 at 12:13 — Mistraë, Sep 08 '14 at 12:13

score 1 · Accepted Answer · answered Sep 08 '14 at 12:00

1

You can create a function which can accept no of characters and then replace the html with the same.

Example Fiddle

Code for the same:

var str = $('#test').html();

function color(noOfCharacters) {
    $('#test').html('<span style="color:red">' + str.substr(0, noOfCharacters) + '</span><span>' + str.substr(noOfCharacters, str.length) + '</span>');
}
color(4);

answered Sep 08 '14 at 12:00

V31

7,626
3
26
44

I need this for a text input in a form not a span – Mistraë Sep 08 '14 at 12:10

Color text in input ( by position )

1 Answers1