html5新特性contenteditable 属性更容易实现动态表单
介绍html5新特性的一个属性:
contenteditable 作用域全局。所有的块标签都可以,例如:span、p、div、td等标签。
但是,不可以作用域<br/>类型的标签。
contenteditable属性的作用是,允许标签获取焦点是可以输入内容。
html5之前:
如果我们想创建一个表单,且表单的表格可以输入内容的情况。会选择一个js事件当点击td标签是动态生成一个input输入框显示在当前td标签区域上方,输入完成后将值赋给当前td中。然后input消失。
拥有html5之后,我们只要在td标签或所有区块标签加上contenteditable='true'的数据就可以实现输入操作了。是不是很方便。
一种场景:
我们可以利用html5的contenteditable属性配合table区实现动态表单生成的操作。只要将需要输入的td框赋值上contenteditable='true',标题框赋值contenteditable='false'或者不写就可以了。
或者提供一个空白的table,列和行可以自动添加的表单,这样用户想要什么样的表单,就自己去操作合适,我们保存模板就可以了。
可能遇到的问题:
后台如何保存数据,前台如何展示模板信息;用户需要有限制性输入内容如何处理,例如:性别内容只可以选择男和女或使用单选下拉框的情况如何处理;如果用户需要统计数据信息,如何处理数据库中的信息。这个是实现一个实用性,易用性动态表单都需要考虑。但这些也是都可以解决的。如果有需要做动态表单的小伙伴,就好好思考这些问题吧。希望本文章可以帮助到你。
这里只提供一个简单实例
实例源码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
td{
line-height: 2em;
min-width: 200px;
border: 1px solid #d4d4d4;
padding: 5px;
padding-top: 7px;
padding-bottom: 7px;
vertical-align: top; }
</style>
</head>
<body>
<table cellspacing="0" style="border-collapse: collapse;">
<thead>
<tr><th colspan="4">个人信息</th></tr>
</thead>
<tbody><tr>
<td contenteditable="false" style="text-align: right;">姓名:</td><td contenteditable="true"></td>
<td contenteditable="false" style="text-align: right;">性别:</td><td contenteditable="true"></td></tr>
<tr>
<td contenteditable="false" style="text-align: right;">出生日期:</td><td contenteditable="true"></td>
<td contenteditable="false" style="text-align: right;">身份证号:</td><td contenteditable="true"></td></tr>
</tbody>
</table>
</body>
</html>
注意:
cellspacing="0"处理td之间的空隙;
style="border-collapse: collapse;"处理td边框重叠显示变粗。
我们看下效果:
html5新特性contenteditable 属性更容易实现动态表单的更多相关文章
- 前端进阶系列(三):HTML5新特性
HTML5 是对 HTML 标准的第五次修订.其主要的目标是将互联网语义化,以便更好地被人类和机器阅读,并同时提供更好地支持各种媒体的嵌入.HTML5 的语法是向后兼容的.现在国内普遍说的 H5 是包 ...
- html5新特性
这一篇博文不会告诉你怎么去使用html5的新特性,只会给你总结一下新特性------对于好学的人可以把这篇文章当做一个目录 对于初接触的人来说是一个导向 对于已经接触过的人来说是一个检测你掌握程度的检 ...
- web全栈架构师[笔记] — 03 html5新特性
HTML5新特性 一.geolocation PC端 精度比较低 通过IP库定位 移动端 通过GPS window.navigator.geolocation 单次 getCurrentPositio ...
- HTML5新特性:范围样式
原文出处:http://blog.csdn.net/hfahe/article/details/7381141 Chromium 最近实现了一个HTML5的新特性:范围样式,又叫做< ...
- 转: HTML5新特性之Mutation Observer
转: HTML5新特性之Mutation Observer Mutation Observer是什么 Mutation Observer(变动观察器)是监视DOM变动的接口.当DOM对象树发生任何变动 ...
- HTML5新特性之CSS+HTML5实例
1.新的DOCTYPE和字符集 HTML5的一项准则就是化繁为简,Web页面的DOCTYPE被极大的简化. <!DOCTYPE html> 同时字符集声明也被简化了: <meta c ...
- Microsoft Tech Summit 2018 课程简述:利用 Windows 新特性开发出更好的手绘视频应用
概述 Microsoft Tech Summit 2018 微软技术暨生态大会将于10月24日至27日在上海世博中心举行,这也会是国内举办的最后一届 Tech Summit,2019 年开始会以 Mi ...
- html5新特性与用法大全了解一下
有好多小伙伴私聊我问我html5新特性 和用法,下面我给大家具体介绍一下html5都新加了哪些新特性,下面我给大家总结一下. 1)新的语义标签 footer header 等等2)增强型表单 表单2. ...
- 第二季第八天 HTML5新特性
在函数内部window.a = a 在全局中就可以拿到这个变量 变量命名.作为函数的参数的时候要详细.调用的时候可以简单点 做全局变量的两个方案 1.绑在标签上data 2.闭包 视频一般都是二进 ...
随机推荐
- OpenLayers加载天地图
openlayer 是基于JavaScript的webGIS库 ,通过openlayer可以很容易的调用地图,并做相应的操作. 在head中载入openlayer的js文件: <link rel ...
- IIS 下 部署nodejs 使用反向代理
目标服务器:targetServer 配置反向代理的服务器:reveseProxServer iis应该是iis7及以上版本,才可以. 1.确定最终访问的网址:比如www.baidu.com .ww ...
- Ubuntu 16.04 安装opencv的各种方法(含opencv contrib扩展包安装方法)
Ubuntu 16.04 安装opencv的各种方法(含opencv contrib扩展包安装方法) https://blog.csdn.net/ksws0292756/article/details ...
- u3D大场景的优化
首先介绍下draw call(这个东西越少你的游戏跑的越快): 在游戏中每一个被展示的独立的部分都被放在了一个特别的包中,我们称之为“描绘指令”(draw call),然后这个包传递到3D部分在屏幕上 ...
- wc 命令
Linux系统中的wc(Word Count)命令的功能为统计指定文件中的字节数.字数.行数,并将统计结果显示输出. 1.命令格式: wc [选项]文件... 2.命令功能: 统计指定文件中的字节数. ...
- spring boot配置文件
1.spring boot通常打成一个jar文件发布,想修改配置文件比较麻烦,但他提供了一种读取外部配置文件的方式.在代码的主类中增加如下代码 System.setProperty("spr ...
- git 撤销已经push到远端的代码
其实是没有直接让远端代码回复到某次的指令,实现撤销push的思路如下: 1.先让代码恢复到想要恢复的前一次提交记录 2.重新提交代码,覆盖端上的代码,就相当于撤销了push 的提交 实现方式如下: 1 ...
- EasyAR SDK在unity中的简单配置及构建一个简单场景。
首先打开EasyAR的官方网站http://www.easyar.cn/index.html,注册登陆之后,打开首页的开发页面. 下载sdk和Unity Samples. 创建一个unity3d工程N ...
- Android使用JUnit进行单元测试
前言:为什么要进行单元测试?单元测试能快速是开发者,找到代码中的问题所在,因为是单元测试,所以代码只执行响应的测试单元,执行快解决问题的效率高,同时提高代码的质量. Android中的单元测试可简单分 ...
- iOS将Unity导出的Xcode工程导入到另一个Xcode项目, 及常见报错的解决方法
demo下载地址 http://pan.baidu.com/s/1pLcpKpl 1.Unity导出工程时设置bundle id要与项目一致 2.修改bit code为NO 3.删除Main.stor ...