views:

54

answers:

4

Suppose you have a text-field in your webpage. The value inside text-field is "This is your welcome text". Is there any way by which I can provide red color to "welcome" and not to other words.

In short applying styling on some part of text inside a text-field.

can some body suggest a way of doing it?

+1  A: 

Not possible unless you are using some sort of rich text editor such as CKEditor, TinyMCE, etc But again I don't think it will be worth incorporating a rich editor for such minor task.

Sarfraz
I am trying to implement some kind of dictionary search so that when you type a wrong word in the text-field, the word turns red instead of providing red-border on text-field. I tried appending text-nodes as child of the text-field but those go as it's innerHTML instead of becoming its value.
alter
@alter: As I said, you can't turn a simple text field to show multiple colors for different parts of text unless you use some sort of rich text editor like i showed in my answer.
Sarfraz
+1  A: 

Not with a text field. You could use a div or some other element with contentEditable set

<div contentEditable="true">
This is your <b style="color:red";>welcome</b> text
</div>

However there are caveats depending on what you want to do with that text.

RoToRa
Hey I tried it, but it looks readonly!
alter
Oops. Changed the attribute value.
RoToRa
+1  A: 

You can't do any styling in a <textarea> except CSS styles that applies to all text inside it. What most rich text editors do is programmatically replace the textarea with an iframe with contentEditable set to true. The way they go about it to make it seamless is relatively advanced and complex, but can be done.

I would recommend just using an off-the-shelf rich text editor for your needs, but if you want to make your own there are plenty of resources available.

tj111
+1  A: 

RoToRa's right, except you need to use TRUE, not yes.

The below code works. You will have to style it more to make it look like a textbox. In Firefox, for example, when you click it, an ugly border appears around it. But this is something like what you want.

<div contenteditable="true" style="width:200; border:1px solid black; padding:1.5;">
This is your <b style="color:red";>welcome</b> text
</div>

Try using CSS to style it instead of using an inline style. Since you have lots of textboxes it would be better that way. I just did it using an inline style to give you an idea of how you can make it look more like a textbox. Border and a slight padding. And then you'll also need to make it some sort of scrollable div. But that's a different question.

Hope that helps,

Dalal

Dalal
AWESOME....this is exactly what I was looking for. Thanks :)
alter