随笔 - 268  文章 - 0  评论 - 1028  阅读 - 160万

奇怪的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又进行了一下对比:

代码
        <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">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还有哪些古怪的设计。期待指点。

posted on   JeffWong  阅读(3828)  评论(2编辑  收藏  举报
编辑推荐:
· 10年+ .NET Coder 心语,封装的思维:从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热?
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列:向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
阅读排行:
· TypeScript + Deepseek 打造卜卦网站:技术与玄学的结合
· 阿里巴巴 QwQ-32B真的超越了 DeepSeek R-1吗?
· 【译】Visual Studio 中新的强大生产力特性
· 10年+ .NET Coder 心语 ── 封装的思维:从隐藏、稳定开始理解其本质意义
· 【设计模式】告别冗长if-else语句:使用策略模式优化代码结构
< 2010年5月 >
25 26 27 28 29 30 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30 31 1 2 3 4 5

I know how to make it works and I want to know how it works.
点击右上角即可分享
微信分享提示