`
newLinuxJava
  • 浏览: 42983 次
  • 性别: Icon_minigender_1
  • 来自: 广州
社区版块
存档分类
最新评论

textarea 嵌套 textarea

    博客分类:
  • html
阅读更多
W3C 对 textarea 标签的定义:(参阅

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

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


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


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



错误用法

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

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

</textarea>




误导我的解决方案:(使用html字符实体

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

    &lt;textarea&gt;&lt;/textarea&gt;<!-- 内嵌的textarea -->

</textarea>



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

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

题,在 TrimPath Template 的源码里发现了这一行:

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


算是作为补救方案吧。

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

TrimPath Template 开源项目地址:http://code.google.com/p/trimpath




分享到:
评论

相关推荐

    HTML的TextArea中保存格式问题解决方法

    textarea在保存时格式是可以保存到数据库的,但是展示时因为/n和不能互转导致页面不能按照刚开始的时候的格式展示,所以在页面展示的时候,要在值的外面嵌套一层 标签,即 复制代码代码如下: ${model.name}&lt;/ pre&gt;

    javascript实现的textarea运行框效果代码 不用指定id批量指定

    今天在写一个网页的时候用到了N多嵌套在textarea标签里的代码,定义双击运行其内的代码段。但是每次创建一个这样的可运行的实例都要给textarea元素自定义一个id值和写入双击事件,好不麻烦。

    scroll-lock::hammer:跨浏览器JavaScript库可禁用滚动页面

    滚动锁定跨浏览器JavaScript库可禁用滚动页面|新功能2.0 更高级的触摸事件处理算法水平滚动支持支持嵌套的可滚​​动元素支持嵌套的textarea和contenteditable 新的API安装通过npm或yarn npm install scroll-lock# ...

    《程序天下:JavaScript实例自学手册》光盘源码

    21.6 使用DOM判断页面中控件是否嵌套 21.7 使用DOM获取页面中某控件的属性 21.8 将某行排在表格的最后 21.9 动态删除页面中的元素 21.10 克隆表格 21.11 拖动表格行改变顺序 21.12 表格操作常用方法 第22章 流行应用...

    程序天下:JavaScript实例自学手册

    21.6 使用DOM判断页面中控件是否嵌套 21.7 使用DOM获取页面中某控件的属性 21.8 将某行排在表格的最后 21.9 动态删除页面中的元素 21.10 克隆表格 21.11 拖动表格行改变顺序 21.12 表格操作常用方法 第22章 流行应用...

    json-schema-editor:JSON数据可视化JSONSchema, 主要用于json结构格式的可视化编辑

    技术栈:React/Mobx/Ant Design特点:支持12种基础类型组件(input、boolean、 date、date-time、 time、 url、textarea、number、color、radio、 select、single-select)支持11个特殊类型组件(object、array、...

    我记录网站综合系统 1.6源码

    mvc:修复了使用to针对textarea验证时无效的bug mvc:增加 ctx.PostDecimal/ctx.PostDouble 等的支持 ORM:增加了 decimal 批注对自定义精度的支持 ORM:修正了批量删除对mysql的支持 上传:增加带进度的flash...

    preCode.js:止痛药 &

    textarea&gt;的止痛药(MIT许可) 可以自动淘汰嵌套在html中的所有代码段的快速工具,使您可以编写更简洁的标记。操这个 &lt; div&gt; &lt; pre&gt; &lt; code&gt; function myFunc(block, flags) { try { if (block.className.search...

    Bootstrap与jQuery UI框架设计(前端开发工程师系列)

    1.1.4 栅格系统的嵌套 1.2 响应式栅格 操作案例2:组合栅格系统 2 CSS布局概要 2.1 CSS布局简介 2.2 基础排版 2.2.1 标题 2.2.2 主体内容 2.2.3 对齐方式 2.2.4 列表 3 禁用响应式布局 本章总结 本章作业 第3章 ...

    easy-layout:与CSS flexbox一起使用的布局元素

    有几个元素可以嵌套。 概括地说,行和列div以及可调整的和拆分的div一起使用。 可以使用鼠标拖动拆分器div,以调整可调整大小的div的大小。 JSX支持 还有现在的形式JSX支持。 因此,尽管您始终可以根据需要直接调用...

    HTML基础学习基础认知,适合小白玩

    textarea标签 select及option标签 button标签 label标签的应用 fieldset及legend标签 表单属性与表单提交 框架集与框架 框架集的嵌套 浮动框架 超链接和表单的目标框架或窗口 使用base标签设定基准目标 ...

    dojo-generate-form:gform-一个dojo库,用于以声明方式构建管理前端

    支持几乎所有模型:列表,地图,嵌套对象,多类型对象。 支持递归模式来创建树模型。 映射到Java之类的基于类的语言的理想选择,因为它支持类型属性的概念。 支持资源(实体)之间的关系。 可以在对话框,标签...

    解决vue+ element ui 表单验证有值但验证失败问题

    一.如图:有值但是验证失败 二. 数据模板 prop=template&gt; &lt;el type=textarea v-model=form.template rows=8 placeholder=请输入数据模板 readonly=true&gt; export default { data()

    html入门到放弃笔记

    1、编写一对 body 标记,在body标记中,嵌套一对 div标记,在 div 标记中 ,嵌套一对 a 标记,在 a标记中,嵌套一对 b 标记,b标记中,随意编写一些文本 &lt;body&gt; 这是一段测试文本 &lt;/body&gt; ...

    JavaScript经典实例

     1.9处理textarea的单个行  1.10去除字符串末尾的空白  1.11左补充或右补充一个字符串  第2章使用正则表达式  2.0简介  2.1测试一个子字符串是否存在  2.2测试不区分大小写的子字符串匹配  2.3验证社会安全...

    从入门到精通HTML5——PDF——网盘链接

     9.5 文本域标记——textarea 198  9.6 id标记 199  9.7 小结 200  9.8 习题 200  第10章 多媒体页面 202  视频讲解:18分钟  10.1 设置滚动文字 203  10.1.1 滚动文字标签——marquee 203  10.1.2 ...

    css笔记课程笔记2019,5,22

    * 文本域 textarea * 隐藏项:type="hidden" * 文件: type="file" * 提交按钮 type="submit" * 重置 : reset * 使用图片提交: &lt;input type="image" src=""/&gt; * 普通按钮 type="button" 6、div和...

    HTML开发王

    10.5 创建多行文本框(textarea元素) 10.6 使用isindex元素创建文本框 10.7 为表单控件定义标签(label元素) 10.8 为表单添加结构(fieldset元素和legend元素) 10.9 将焦点移到某个元素上 10.9.1 使用【tab】键导航 ...

    精通AngularJS part1

    使用基于文本的输入(text、textarea、e—mail、URL、number)143 使用checkbox输入144 使用radio输入145 使用select输入145 提供简单的字符串options145 利用ngOptions指令提供动态options146 select指令与空...

Global site tag (gtag.js) - Google Analytics