underline a part of text in Textarea

Question

is it possible to underline a portion of text in control.

I did like this in jquery, but no underline is appearing. any sample code examples?

<textarea rows = "3" cols = "50" id = "TestName" ></textarea>

Jquery

 var dvHTML = ''
 dvHTML = '<span style=text-decoration: underline;>' + "Hello world" + '</span>';
$("#TestName").html(dvHTML);

Output i'm getting as only Hello world, tags are not getting recognized

I'm just thinking aloud: I'm not sure you can have html tags in a textarea. A solution that comes to my mind is to have a normal html element and set it to contenteditable = True ( http://html5demos.com/contenteditable ). And when you send your text to the server you get it from the div with jQuery — Jonas Grumann, Mar 13 '14 at 10:01
have a look here http://stackoverflow.com/questions/4705848/rendering-html-inside-textarea — BeNdErR, Mar 13 '14 at 10:02
No, it is not, because the content model of `textarea` is [`Text`](http://www.w3.org/TR/html5/dom.html#text-content). Whenever you see such an _effect_, it mean the `textarea`has been _replaced_ with something else (probably a “normal” element with `contenteditable` attribute set). — CBroe, Mar 13 '14 at 10:03
If so, then how does sharepoint people picker control works?, how they have implemented that, it does underlining when it recognizes contact — Naruto, Mar 13 '14 at 10:06
You could fake the `` by `contenteditable` as: http://jsfiddle.net/hashem/9PXtu/6/ — Hashem Qolami, Mar 13 '14 at 10:07
Also, it's worth taking a look at [this](http://stackoverflow.com/questions/8438418/css3-how-to-style-the-selected-text-in-textareas-and-inputs-in-chrome) and [this](http://stackoverflow.com/questions/12492856/underlining-text-of-a-textarea). — Hashem Qolami, Mar 13 '14 at 10:09
Yes, out of two one would work only in chrome, another one says use div as fake textbox — Naruto, Mar 13 '14 at 10:25

score 5 · Answer 1 · answered Mar 13 '14 at 10:08

5

You can use a contenteditable div.

<div contenteditable="true">I am saying <span>Hello</span></div>

Working Fiddle

answered Mar 13 '14 at 10:08

Mr_Green

40,727
45
159
271

score 4 · Answer 2 · answered Mar 13 '14 at 10:01

4

You can't do that on textarea, You'll need some WYSIWYG if you need style on it. Or you can fake user by adding div above of the textarea, and hide the textarea it self.

answered Mar 13 '14 at 10:01

Iqbal Fauzi

1,561
11
12

Thanks, are there any sample example? – Naruto Mar 13 '14 at 10:04
If so, then how does sharepoint people picker control works?, how they have implemented that, it does underlining when it recognizes contact – Naruto Mar 13 '14 at 10:05
@Iqbal Fauzi, how can we create the div about the textarea? Is there such an example somewhere? – Nathan B Apr 15 '19 at 14:23

score 0 · Answer 3 · edited Mar 13 '14 at 10:06

0

If you just want to underline the specific text you can use:

<textarea style="text-decoration:underline;" rows="20" cols="30" id="text">All are Welcome!!</textarea>


$("document").ready(function() {
    $("#text").val($("#text").text());
    $('textarea').keypress(function(e) {
          $(this).css('text-decoration','none');
    });
});

Demo: http://jsfiddle.net/fiddleyetu/czZWp/6/

edited Mar 13 '14 at 10:06

BeNdErR

17,471
21
72
103

answered Mar 13 '14 at 10:06

Systematix Infotech

2,345
1
14
31

this will underline everything inside the textarea – BeNdErR Mar 13 '14 at 10:07
I want a specific portion of the line to be underlined, – Naruto Mar 13 '14 at 10:07

xdazz · Answer 4 · 2014-03-13T10:23:06.687

0

You can't do with a text area, the solution is to use an editable div.

HTML:

<div id="foo">
</div>

JS:

var dvHTML = '<span style="text-decoration: underline;">Hello world</span>';

$("#foo").html(dvHTML).click(function() {
    this.contentEditable = true;                
});

THE LIVE DEMO.

edited Mar 13 '14 at 10:23

answered Mar 13 '14 at 10:08

xdazz

158,678
38
247
274

in this case, if my text size is more then div size then it will come out of the border right?, if i hit enter it wont expand like text area na> – Naruto Mar 13 '14 at 10:20
@LLL You could do some css trick to deal with this, check the demo again i updated it. – xdazz Mar 13 '14 at 10:23

score 0 · Answer 5 · edited May 23 '17 at 12:17

Add double inverted commas " in style tag first and then a semicolon after divHtml = ''

This will work -

<!DOCTYPE html>
<html>
<body>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<textarea rows = "3" cols = "50" id = "TestName" style="text-decoration: underline;"></textarea>
<script>
var dvHTML = '';
 dvHTML =  "Hello world" ;
$("#TestName").html(dvHTML);
</script>
</body>
</html>

And to let you know the difference, the HTML that you enter inside the textarea will be its text. It will render it as text. So instead add text decoration as style of text area. And, about your original question - its not possible with textarea. See this -

Rendering HTML inside textarea

underline a part of text in Textarea

5 Answers5