contenteditable实现可编辑的HTML标签
最近工作中遇到了一个小问题,让我学到了新的标签属性——contenteditable。
我需要实现的是手机端界面,特别简单的一个页面,如下图;
在我脑海里第一时间想到的应该就是一个form表单然后里面包裹着一个textarea标签这么简单吧,心想着这个界面顶多用十分钟就能搞定。
然后打开编辑器我就开始写了,代码如下;
<form class='textbox' action="" method="post">
<textarea name="" rows="10" cols="20">请写下您的描述</textarea>
<input type="submit" name="finish" id="finish" value="完成" />
<input type="button" name="cancel" id="cancel" value="取消" />
</form>
简单写好样式以后就打开浏览器切换到手机模式下跑一下,结果一眼就发现了问题所在,textarea标签的宽高不能自适应......我用自己所学过狭隘的知识探索并尝试过一番之后发现......还是百度一下吧(/(ㄒoㄒ)/~~)
搜索结果第一条就是HTML5全局contenteditable属性,以前没见过这个属性就打开看了一下,竟然发现比较简单而且很好用。
contenteditable这个属性是如此的好玩,在HTML标签后面增加这个属性并赋予属性值为true,死死的标签竟神奇般的可以编辑了,而且兼容性很好(IE6已经脱节所以没做测试),后来想了想可能用到这个应该有QQ空间吧,打开看了下果然不是textarea,用的是一个div增加contenteditable的属性实现的。
借助着新认识的属性和简单的css样式很快实现了我想要的效果,当你用的时候发现光标点击开始编辑的时候会有边框,而简单的border:none并不能实现清除边框的作用,这个时候给标签添加一组简单的样式代码就可以了:
-webkit-tap-highlight-color:rgba(0,0,0,0);
-webkit-user-modify:read-write-plaintext-only;
outline:none;
contenteditable这个新属性就好比一把钥匙叩开了紧闭标签的编辑大门,以后也许像我这样很可能就会用得到哦,所以写在这里分享给大家,希望大家也都能相互学习。
最新文章
- 第五篇T语言实例开发,数组空间使用
- Unity3D 开发之shader教程(浅谈光照之漫反射diffuse)
- Linux多线程编程(不限Linux)【转】
- 教你安装CentOS 6.5如何选择安装包
- 10个实用的PHP正则表达式 (转)
- poj3468A Simple Problem with Integers(线段树,在段更新时要注意)
- C#下的 Emgu CV
- Unity3d shader之SWAP Force Depth-of-Field Shader
- bzoj2821
- Asp.net MVC中的ViewData与ViewBag(转)
- 向mysql添加新用户并分配权限
- 企业架构研究总结(43)——企业架构与建模之ArchiMate详述(下)
- 2016 C++及系统软件技术大会亮点
- ice grid 第一篇
- Mysql的收获
- PAT1124:Raffle for Weibo Followers
- Java虚拟机三:OutOfMemoryError异常分析
- GitLab配置后收取不到邮件问题
- BrupSuite渗透测试笔记(十)
- hdu 1466 计算直线的交点数 递推