textarea 嵌套 textarea

最新推荐文章于 2026-06-25 09:09:17 发布

原创最新推荐文章于 2026-06-25 09:09:17 发布 · 1k 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

html

本文详细阐述了W3C对textarea标签的定义，并揭示了当textarea标签嵌套使用时可能导致的页面样式混乱问题。通过案例分析和解决方案，帮助开发者避免常见的HTML陷阱。

W3C 对 textarea 标签的定义：（[url=http://www.w3school.com.cn/tags/tag_textarea.asp]参阅[/url]）

<textarea> 标签定义多行的文本输入控件，

文本区中可容纳无限数量的文本。

所以，一般情况下，textarea 里面是不再嵌套其他标签的。

[color=red]当 textarea 嵌套 textarea 的时候，最开始的那个＜textarea＞会以在它下面的第一次出现的＜/textarea＞作为它的闭合标签，不再去理会该闭合标签后面的代码，这样就会导致页面原本的样式混乱了。[/color]

[b]错误用法[/b]：

<textarea><!-- 最外层textarea -->

    <textarea></textarea><!-- 内嵌的textarea -->
    ＜input type="button" value="这个button会跑到最外层textarea外面" />

</textarea>

[b]误导我的解决方案[/b]：（使用[url=http://www.w3school.com.cn/html/html_entities.asp]html字符实体[/url]） :shock:

<textarea><!-- 最外层textarea -->

    <textarea></textarea><!-- 内嵌的textarea -->

</textarea>

之所以出现上述误导我的解决方案，是因为曾在一个项目里面使用了一个 TrimPath Template 的页面模板引擎，

而这个模板引擎本身使用了一个隐藏的textarea作为模板，（我估计）后来作者也发现了textarea嵌套textarea的问

题，在 TrimPath Template 的源码里发现了这一行：

content = content.replace(/</g, "<").replace(/>/g, ">");

算是作为补救方案吧。

上述误导人的解决方案，只能使用于 TrimPath Template 的项目里，对于正常的html页面textarea套textarea，还是没有办法的。 8)

TrimPath Template 开源项目地址：[url=http://code.google.com/p/trimpath]http://code.google.com/p/trimpath[/url]

标签

#html #textarea