奇怪的html控件textarea

本文探讨了HTML控件textarea与服务器控件textbox的区别,特别是在多行文本输入方面的表现。通过实践对比,揭示了两者在属性设置及JavaScript操作上的差异。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >


======================================================
注:本文源代码点此下载
======================================================

虽然一直没怎么用过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">123textarea>

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

代码

asp:textbox id="txttest" textmode="multiline" enableviewstate="false" runat="server">asp:textbox>

textarea id="txttest1" cols="20" rows="2" enableviewstate="false" runat="server">textarea>

cs下写下如下代码:

this.txttest.text = "123";

this.txttest1.value = "123";

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

textarea name="txttest" rows="2" cols="20" id="txttest">123textarea>

textarea name="txttest1" id="txttest1" cols="20" rows="2">123textarea>

而对于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还有哪些古怪的设计。期待指点。


======================================================
在最后,我邀请大家参加新浪APP,就是新浪免费送大家的一个空间,支持PHP+MySql,免费二级域名,免费域名绑定 这个是我邀请的地址,您通过这个链接注册即为我的好友,并获赠云豆500个,价值5元哦!短网址是http://t.cn/SXOiLh我创建的小站每天访客已经达到2000+了,每天挂广告赚50+元哦,呵呵,饭钱不愁了,\(^o^)/
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值