12

This is very weird. Apparently, I can use both .val() and .text() to manipulate textarea text.

But after I use .val to change the text, I cannot use .text anymore. The converse is not true.

This is leading to some funky bugs. The reason is because a plugin i am using might be using .val to manipulate the text.

Can anyone explain how this works? Thanks!

meow
  • 27,476
  • 33
  • 116
  • 177

4 Answers4

9

You have to use val(), or (better) the value property of the textarea. text() works initially because the initial value of the textarea is determined by the text node (if any) it contains. You can even initially change the nodeValue or data property of this text node and it will update the textarea's value. However, as soon as either the user has altered the value of the textarea or script has altered the value property of the textarea, the text node is out of the picture and is no longer bound to the textarea's value in any way.

Tim Down
  • 318,141
  • 75
  • 454
  • 536
  • 1
    Great explanation. What do you mean "the text node is out of the picture" - you mean the textnode is initially tied to the textarea? – meow Oct 19 '10 at 15:18
  • Yes, that's exactly it. Initially, changing the text node will change the textarea's value, but once the value has been changed by some other means (user input or script changing the `value` property), changing the text node will have no longer have any effect on the value. Changing the `value` property never has any effect on the text node. – Tim Down Oct 19 '10 at 15:23
8

The .val() function gets the "value" attribute of the <textarea> element, while .text() gets the contents of the text nodes (node type 3) in the element. I'd say that if setting .text() works at all, it's not a good idea, as it's essentially fooling around with the basic building blocks of matter. It could cause a bug, or a browser crash, or a devastating explosion.

Use .val().

edit — .text() works up to the point at which a user interacts with the <textarea> element, or JavaScript code sets the "value" property. After that point, the DOM content of the element becomes irrelevant. You can still get it, but it won't reflect the actual state of the element.

Pointy
  • 405,095
  • 59
  • 585
  • 614
  • awesome explanation! and... "basic building blocks of matter", "devastating explosion" - were you a physicist by training? ;) – meow Oct 19 '10 at 01:08
1

Sounds strange, but at a lower level, .val() is what I'm expecting to work since .value is the way to access the content of form-elements. Why .text() is working in some cases beats me

Onkelborg
  • 3,927
  • 1
  • 19
  • 22
  • 1
    It doesn't have to beat you. textarea may contain, different from e.g. inputs, cdata(textnodes) . And this is, what what text() will retrieve...textnodes. – Dr.Molle Oct 19 '10 at 01:12
  • Ah, that would explain it. Most likely, a call to val('dummy') would overwrite any textnodes.. :) – Onkelborg Oct 19 '10 at 01:16
  • It could, but it should'nt ovrewrite, depends on the browsers implementation. Just keep in mind to access via javascript always and only the value-attribute instead of the containing textNode, and you wouldnt get problems in any browser. – Dr.Molle Oct 19 '10 at 01:55
  • I agree with you, it shouldn't, but in this case it seems to be the reason to why it doesn't work :) – Onkelborg Oct 19 '10 at 09:33
1

Has to with the type of Node .text() retrieves...

.Text() gets the innerText (not HTML) of all the matched elements and .val() retrieves values from input elements...

Alex
  • 34,899
  • 5
  • 77
  • 90