Apply style to selected text in a textbox

Question

I have the following code

   $('#txtEditor').select(function (e) {
        var start = e.target.selectionStart;
        var end = e.target.selectionEnd;
        selText = $('#txtEditor').val().substring(start, end);
    });

<asp:TextBox ID="txtEditor" runat="server" TextMode="MultiLine" Width="500px" Height="500px" Font-Size="Large"></asp:TextBox>

I want to apply some style (colour it or make it bold or ittallic etc) only to the selected text (after selection) in the textbox. In selText Im getting the selected string. But I couldn't find any event or function which will apply style only to the selected string in the textbox.

add css with the following - $('selector').css('name', 'value'); — shammelburg, May 30 '13 at 07:29
Could [this link](http://stackoverflow.com/questions/8438418/css3-how-to-style-the-selected-text-in-textareas-and-inputs-in-chrome) be an option for you? — Niklas, May 30 '13 at 07:29
Textbox can have a plenty of text in it I need to apply style only to the selected text. Like what we are doing with a msword or something. — Sudha, May 30 '13 at 07:34
Is `TextBox` equal `` ? If it is `textarea`, you can't change the style of a part of it. — Steely Wing, May 30 '13 at 07:50
its a texbox only. Now Im using a asp:TextBox. If its an html textbox ( — Sudha, May 30 '13 at 08:27
Maybe you are looking for a HTML editor? Like the [CKEditor](http://ckeditor.com/)? — Mr Lister, May 30 '13 at 19:09
Yes my aim is to create one. These are the priliminary doubts — Sudha, Jun 06 '13 at 06:07
I didnt get a solution yet. If its in a div its fine. But I couldn't get it done with a textbox. — Sudha, Jun 06 '13 at 10:06

score 2 · Answer 1 · answered May 30 '13 at 13:38

2

HERE IS THE COMPLETE SOLUTION...SUDHA

http:// js fiddle .net/ sandeepvirani/ mzays/

remove space between

answered May 30 '13 at 13:38

Sandy

663
1
4
9

1

Ehm... why put the spaces in to begin with? – Mr Lister May 30 '13 at 19:06
@Sandeep Virani, I have tried this example. The thing is that its working for 'div' but never working for my 'textbox'. How can I modify the js file inorder to achieve my requirement? – Sudha Jun 03 '13 at 09:00
In my textbox the content (string) is typing dynamically and I want to style a selected portion. (Like what we can do in MSWord or something) – Sudha Jun 03 '13 at 09:04
@Mr Lister : stackoverflow can't allow me to put link of jsfiddle thats why. – Sandy Jun 05 '13 at 11:59
I didnt get a solution yet. If its in a div its fine. But I couldn't get it done with a textbox. – Sudha Jun 06 '13 at 10:05

score 0 · Answer 2 · answered May 30 '13 at 07:33

To change the color of the selection part of a text on a page, use the CSS ::selection pseudo-element.

See MDN documentation.

Note however, that

This is a non-standard selector, which is supported by many browsers, but not endorsed by the W3C.
You can't change just any property, really only just colors. Not bold!

If you want to change some text inside a paragraph or something, you can use Javascript to quickly put the whole of the selection inside a new element, a span or something, and then apply properties to the span. However, if it's text in a textbox, you're out of luck, as you can't add child elements to an input.

Apply style to selected text in a textbox

2 Answers2