奇怪的html控件textarea-白红宇

虽然一直没怎么用过html控件textarea，但是根据自己一贯的作风，楼猪大胆认为textarea和服务器控件TextBox的TextMode为MultiLine的文本框在最终生成的html标签上应该是一样的。也许是先入为主吧，在上周的一个设计页面中，楼猪毫不思索地写下了下面的html代码：

<
textarea 
id
="txtTest1"
 value
="123"
 cols
="20"
 rows
="2"
></
textarea
>

然后，vs有一个提示：消息 1 验证 (XHTML 1.0 Transitional): 属性“value”不是元素“textarea”的有效属性。

晕，textare难道竟然没有value属性？然后楼猪又尝试将textarea放在服务端：

<
textarea 
id
="txtTest1"
 cols
="20"
 rows
="2"
 enableviewstate
="false"
 runat
="server"
></
textarea
>

然后，在cs文件下，可以写如下代码：

    
this
.txtTest1.Value 
=
 
"
123
"
;

这说明服务端的Value属性是存在的，楼猪又查了一下Value属性元数据说明：获取或设置在 System.Web.UI.HtmlControls.HtmlTextArea 控件中输入的文本。再查看一下生成的html源码：

<
textarea name
=
"
txtTest1
"
 id
=
"
txtTest1
"
 cols
=
"
20
"
 rows
=
"
2
"
>
123
</
textarea
>

现在一目了然。原来textarea的“value”值在textarea开始和结束标签内，而不是像type为text的input，看起来是将value放在value属性上。然后楼猪又用服务器控件TextBox和runat为server的textarea又进行了一下对比：

代码

cs下写下如下代码：

          
this
.txtTest.Text 
=
 
"
123
"
;
this
.txtTest1.Value 
=
 
"
123
"
;

它们生成的html也是一样的：

        
<
textarea 
name
="txtTest"
 rows
="2"
 cols
="20"
 id
="txtTest"
>
123
</
textarea
>
<
textarea 
name
="txtTest1"
 id
="txtTest1"
 cols
="20"
 rows
="2"
>
123
</
textarea
>

而对于TextBox而言，它又是可以直接在标签上写Text属性的，而runat="server"的textarea却不可以直接在标签内写Value属性：

<
asp:TextBox 
ID
="txtTest"
 TextMode
="MultiLine"
 Text
="123"
 EnableViewState
="false"
 runat
="server"
></
asp:TextBox
>

然后，楼猪又通过javascript来获取它们的value：

        
var
 txtValue
=
document.getElementById(
"
txtTest
"
).value;
         alert(txtValue);
var
 txtValue1
=
document.getElementById(
"
txtTest1
"
).value;
         alert(txtValue1);

kao，这一次它们又都弹出了值123！这就说明textarea是有value属性的（换成innerText属性也一样）。真的彻底服了。最后楼猪为了保险起见，将textarea换成了自己一直使用习惯的没有视图状态的TextBox，因为现在不熟悉也吃不透这个textarea还有哪些古怪的设计。期待指点。

本文转自JeffWong博客园博客，原文链接：http://www.cnblogs.com/jeffwongishandsome/archive/2010/05/30/1747399.html，如需转载请自行联系原作者