val() vs. text() for textarea

问题:

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.

回答1:

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 . The following test cases illustrate how text() and .val() relate to each other:

var t = '<span class="str" bdsfid="185">'</span><span class="pun" bdsfid="186">;</span><span class="pln" bdsfid="187"> console</span><span class="pun" bdsfid="188">.</span><span class="pln" bdsfid="189">log</span><span class="pun" bdsfid="190">(</span><span class="pln" bdsfid="191">$</span><span class="pun" bdsfid="192">(</span><span class="pln" bdsfid="193">t</span><span class="pun" bdsfid="194">).</span><span class="pln" bdsfid="195">text</span><span class="pun" bdsfid="196">(</span><span class="str" bdsfid="197">'test'</span><span class="pun" bdsfid="198">).</span><span class="pln" bdsfid="199">val</span><span class="pun" bdsfid="200">());</span><span class="pln" bdsfid="201">             </span><span class="com" bdsfid="202">// Prints test</span><span class="pln" bdsfid="203"> console</span><span class="pun" bdsfid="204">.</span><span class="pln" bdsfid="205">log</span><span class="pun" bdsfid="206">(</span><span class="pln" bdsfid="207">$</span><span class="pun" bdsfid="208">(</span><span class="pln" bdsfid="209">t</span><span class="pun" bdsfid="210">).</span><span class="pln" bdsfid="211">val</span><span class="pun" bdsfid="212">(</span><span class="str" bdsfid="213">'too'</span><span class="pun" bdsfid="214">).</span><span class="pln" bdsfid="215">text</span><span class="pun" bdsfid="216">(</span><span class="str" bdsfid="217">'test'</span><span class="pun" bdsfid="218">).</span><span class="pln" bdsfid="219">val</span><span class="pun" bdsfid="220">());</span><span class="pln" bdsfid="221">  </span><span class="com" bdsfid="222">// Prints too</span><span class="pln" bdsfid="223"> console</span><span class="pun" bdsfid="224">.</span><span class="pln" bdsfid="225">log</span><span class="pun" bdsfid="226">(</span><span class="pln" bdsfid="227">$</span><span class="pun" bdsfid="228">(</span><span class="pln" bdsfid="229">t</span><span class="pun" bdsfid="230">).</span><span class="pln" bdsfid="231">val</span><span class="pun" bdsfid="232">(</span><span class="str" bdsfid="233">'too'</span><span class="pun" bdsfid="234">).</span><span class="pln" bdsfid="235">text</span><span class="pun" bdsfid="236">());</span><span class="pln" bdsfid="237">              </span><span class="com" bdsfid="238">// Prints nothing</span><span class="pln" bdsfid="239"> console</span><span class="pun" bdsfid="240">.</span><span class="pln" bdsfid="241">log</span><span class="pun" bdsfid="242">(</span><span class="pln" bdsfid="243">$</span><span class="pun" bdsfid="244">(</span><span class="pln" bdsfid="245">t</span><span class="pun" bdsfid="246">).</span><span class="pln" bdsfid="247">text</span><span class="pun" bdsfid="248">(</span><span class="str" bdsfid="249">'test'</span><span class="pun" bdsfid="250">).</span><span class="pln" bdsfid="251">val</span><span class="pun" bdsfid="252">(</span><span class="str" bdsfid="253">'too'</span><span class="pun" bdsfid="254">).</span><span class="pln" bdsfid="255">val</span><span class="pun" bdsfid="256">());</span><span class="pln" bdsfid="257">  </span><span class="com" bdsfid="258">// Prints too</span><span class="pln" bdsfid="259">  console</span><span class="pun" bdsfid="260">.</span><span class="pln" bdsfid="261">log</span><span class="pun" bdsfid="262">(</span><span class="pln" bdsfid="263">$</span><span class="pun" bdsfid="264">(</span><span class="pln" bdsfid="265">t</span><span class="pun" bdsfid="266">).</span><span class="pln" bdsfid="267">text</span><span class="pun" bdsfid="268">(</span><span class="str" bdsfid="269">'test'</span><span class="pun" bdsfid="270">).</span><span class="pln" bdsfid="271">val</span><span class="pun" bdsfid="272">(</span><span class="str" bdsfid="273">'too'</span><span class="pun" bdsfid="274">).</span><span class="pln" bdsfid="275">text</span><span class="pun" bdsfid="276">());</span><span class="pln" bdsfid="277"> </span><span class="com" bdsfid="278">// Prints test</span>

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

回答2:

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

回答3:

Select by attribute name instead of id.

转载请标明出处:val() vs. text() for textarea

文章来源: val() vs. text() for textarea