W3C 对 textarea 标签的定义:(
参阅)
<textarea> 标签定义多行的文本输入控件,
文本区中可容纳无限数量的文本。
所以,一般情况下,textarea 里面是不再嵌套其他标签的。
当 textarea 嵌套 textarea 的时候,最开始的那个<textarea>会以在它下面的第一次出现的</textarea>作为它的闭合标签,不再去理会该闭合标签后面的代码,这样就会导致页面原本的样式混乱了。
错误用法:
<textarea><!-- 最外层textarea -->
<textarea></textarea><!-- 内嵌的textarea -->
<input type="button" value="这个button会跑到最外层textarea外面" />
</textarea>
误导我的解决方案:(使用
html字符实体)
<textarea><!-- 最外层textarea -->
<textarea></textarea><!-- 内嵌的textarea -->
</textarea>
之所以出现上述误导我的解决方案,是因为曾在一个项目里面使用了一个 TrimPath Template 的页面模板引擎,
而这个模板引擎本身使用了一个隐藏的textarea作为模板,(我估计)后来作者也发现了textarea嵌套textarea的问
题,在 TrimPath Template 的源码里发现了这一行:
content = content.replace(/</g, "<").replace(/>/g, ">");
算是作为补救方案吧。
上述误导人的解决方案,只能使用于 TrimPath Template 的项目里,对于正常的html页面textarea套textarea,还是没有办法的。
TrimPath Template 开源项目地址:
http://code.google.com/p/trimpath
分享到:
相关推荐
textarea在保存时格式是可以保存到数据库的,但是展示时因为/n和不能互转导致页面不能按照刚开始的时候的格式展示,所以在页面展示的时候,要在值的外面嵌套一层 标签,即 复制代码代码如下: ${model.name}</ pre>
今天在写一个网页的时候用到了N多嵌套在textarea标签里的代码,定义双击运行其内的代码段。但是每次创建一个这样的可运行的实例都要给textarea元素自定义一个id值和写入双击事件,好不麻烦。
滚动锁定跨浏览器JavaScript库可禁用滚动页面|新功能2.0 更高级的触摸事件处理算法水平滚动支持支持嵌套的可滚动元素支持嵌套的textarea和contenteditable 新的API安装通过npm或yarn npm install scroll-lock# ...
21.6 使用DOM判断页面中控件是否嵌套 21.7 使用DOM获取页面中某控件的属性 21.8 将某行排在表格的最后 21.9 动态删除页面中的元素 21.10 克隆表格 21.11 拖动表格行改变顺序 21.12 表格操作常用方法 第22章 流行应用...
21.6 使用DOM判断页面中控件是否嵌套 21.7 使用DOM获取页面中某控件的属性 21.8 将某行排在表格的最后 21.9 动态删除页面中的元素 21.10 克隆表格 21.11 拖动表格行改变顺序 21.12 表格操作常用方法 第22章 流行应用...
技术栈:React/Mobx/Ant Design特点:支持12种基础类型组件(input、boolean、 date、date-time、 time、 url、textarea、number、color、radio、 select、single-select)支持11个特殊类型组件(object、array、...
mvc:修复了使用to针对textarea验证时无效的bug mvc:增加 ctx.PostDecimal/ctx.PostDouble 等的支持 ORM:增加了 decimal 批注对自定义精度的支持 ORM:修正了批量删除对mysql的支持 上传:增加带进度的flash...
textarea>的止痛药(MIT许可) 可以自动淘汰嵌套在html中的所有代码段的快速工具,使您可以编写更简洁的标记。操这个 < div> < pre> < code> function myFunc(block, flags) { try { if (block.className.search...
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章 ...
有几个元素可以嵌套。 概括地说,行和列div以及可调整的和拆分的div一起使用。 可以使用鼠标拖动拆分器div,以调整可调整大小的div的大小。 JSX支持 还有现在的形式JSX支持。 因此,尽管您始终可以根据需要直接调用...
textarea标签 select及option标签 button标签 label标签的应用 fieldset及legend标签 表单属性与表单提交 框架集与框架 框架集的嵌套 浮动框架 超链接和表单的目标框架或窗口 使用base标签设定基准目标 ...
支持几乎所有模型:列表,地图,嵌套对象,多类型对象。 支持递归模式来创建树模型。 映射到Java之类的基于类的语言的理想选择,因为它支持类型属性的概念。 支持资源(实体)之间的关系。 可以在对话框,标签...
一.如图:有值但是验证失败 二. 数据模板 prop=template> <el type=textarea v-model=form.template rows=8 placeholder=请输入数据模板 readonly=true> export default { data()
1、编写一对 body 标记,在body标记中,嵌套一对 div标记,在 div 标记中 ,嵌套一对 a 标记,在 a标记中,嵌套一对 b 标记,b标记中,随意编写一些文本 <body> 这是一段测试文本 </body> ...
1.9处理textarea的单个行 1.10去除字符串末尾的空白 1.11左补充或右补充一个字符串 第2章使用正则表达式 2.0简介 2.1测试一个子字符串是否存在 2.2测试不区分大小写的子字符串匹配 2.3验证社会安全...
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 ...
* 文本域 textarea * 隐藏项:type="hidden" * 文件: type="file" * 提交按钮 type="submit" * 重置 : reset * 使用图片提交: <input type="image" src=""/> * 普通按钮 type="button" 6、div和...
10.5 创建多行文本框(textarea元素) 10.6 使用isindex元素创建文本框 10.7 为表单控件定义标签(label元素) 10.8 为表单添加结构(fieldset元素和legend元素) 10.9 将焦点移到某个元素上 10.9.1 使用【tab】键导航 ...
使用基于文本的输入(text、textarea、e—mail、URL、number)143 使用checkbox输入144 使用radio输入145 使用select输入145 提供简单的字符串options145 利用ngOptions指令提供动态options146 select指令与空...