formatting part of text inside a textfield

夙愿已清 提交于 2019-12-24 02:03:54

问题


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:


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.




回答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.




回答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.




回答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.



来源:https://stackoverflow.com/questions/3460270/formatting-part-of-text-inside-a-textfield

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!