Formatting Part Of Text Inside A Textfield

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

Solution 1:

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.

Solution 2:

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.

Solution 3:

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.

Solution 4:

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.