val() vs. text() for textarea

Question

I am using jQuery, and wondering if I should use val() or text() (or another method) to read and update the content of a textarea.

I have tried both and I've had issues with both. When I use text() to update textarea, line breaks (\n) don't work. When I use val() to retrieve the textarea content, the text gets truncated if it's too long.

And what do you mean by "text gets truncated" - in the debug output of the console? In the return value itself? Would be easier if you provided a jsfiddle... — Constantin Groß, Jan 13 '12 at 17:05
I got here by google'ing for truncated textarea text. I fixed my problem by adding a couple of \n\n to the end of the .val(). Weird but it worked. — Darin, Feb 09 '13 at 23:52

score 152 · Accepted Answer · edited Jan 14 '12 at 03:26

152

The best way to set/get the value of a textarea is the .val(), .value method.

.text() internally uses the .textContent (or .innerText for IE) method to get the contents of a <textarea>. The following test cases illustrate how text() and .val() relate to each other:

var t = '<textarea>';
console.log($(t).text('test').val());             // Prints test
console.log($(t).val('too').text('test').val());  // Prints too
console.log($(t).val('too').text());              // Prints nothing
console.log($(t).text('test').val('too').val());  // Prints too

console.log($(t).text('test').val('too').text()); // Prints test

The value property, used by .val() always shows the current visible value, whereas text()'s return value can be wrong.

edited Jan 14 '12 at 03:26

Christophe

27,383
28
97
140

answered Jan 13 '12 at 17:00

Rob W

341,306
83
791
678

thx, trying this right now. I am currently unable to replicate the issue I had with val() and truncation. Maybe I got the wrong suspect... – Christophe Jan 13 '12 at 21:23
6

Thanks a bunch for the examples. Apparently that was my issue, I wrote with text() and read with val(). – Christophe Jan 14 '12 at 03:02
1

Changing the value of a textarea using `text()` does NOT work anymore after manually changing anything in it (e.g. adding a character) – Jan Jul 03 '17 at 15:37

score 15 · Answer 2 · edited Apr 24 '17 at 07:07

15

.val() always works with textarea elements.

.text() works sometimes and fails other times! It's not reliable (tested in Chrome 33)

What's best is that .val() works seamlessly with other form elements too (like input) whereas .text() fails.

edited Apr 24 '17 at 07:07

Yoav Kadosh

4,807
4
39
56

answered Apr 10 '14 at 16:50

KJ Saxena

21,452
24
81
109

val() vs. text() for textarea

2 Answers2

Linked

Related