HTML5 Content Editable实践
基于此开发文档:https://developer.mozilla.org/zh-CN/docs/Web/Guide/HTML/Content_Editable
问题:通过contenteditable实现的输入框没有placeholder,所以自己实现了一下
.cd-write{background:#fafafa;padding:8px 12px;position:fixed;left:;right:;bottom:;border-top:solid 1px #dfdede;z-index:;}
.cd-write .btn{background:#fda626;color:white;height:34px;font-size:16px;width:60px;text-align:center;border-radius:5px;line-height:34px;position:fixed;bottom:11px;right:12px;}
.cd-write .input{overflow:hidden;padding:8px 6px;border:solid 1px #ebebeb;overflow:auto;background:white;border-radius:5px;min-height:16px;max-height:100px;line-height:140%;outline:none;margin-right:70px;}
.cd-write .input:empty:before{content: attr(placeholder);color:#bbb;}
<div class="cd-write">
<div class="btn">发送</div>
<div class="input" contentEditable="true" placeholder="评论"></div>
</div>
HTML5 Content Editable实践的更多相关文章
- HTML5 history API实践
一.history API知识点总结 在HTML4中,我们已经可以使用window.history对象来控制历史记录的跳转,可以使用的方法包括: history.forward();//在历史记录中前 ...
- 【转】39个让你受益的HTML5教程
闲话少说,本文作者为大家收集了网上学习HTML5的资源,期望它们可以帮助大家更好地学习HTML5. 好人啊! 不过,作者原来说的40个只有39个,因为第5个和第8个是重复的. 原文在此! 1. 五分钟 ...
- 39个让你受益的HTML5教程
1. 五分钟入门HTML5 (Learn HTML5 in 5 Minutes!) By Jennifer Marsman 毫无疑问,HTML5是一个热门话题.如果你需要一个迅速了解HTML基础的速成 ...
- 【HTML5 1】39个让你受益的HTML5教程
闲话少说,本文作者为大家收集了网上学习HTML5的资源,期望它们能够帮助大家更好地学习HTML5. 好人啊! 只是,作者原来说的40个仅仅有39个,由于第5个和第8个是反复的. 原文在此! 1. 五分 ...
- 39一个可以让你受益HTML5课程
事不宜迟,本文作者是我们收集的在线学习HTML5资源.我们希望他们能够帮助你更好地学习HTML5. 不错啊! 只,说原作者40一个只有39一.由于第一5钍和8一是重复. 原文在此! 1. 五分钟入门H ...
- 【转帖】39个让你受益的HTML5教程
39个让你受益的HTML5教程 闲话少说,本文作者为大家收集了网上学习HTML5的资源,期望它们可以帮助大家更好地学习HTML5. 好人啊! 不过,作者原来说的4 ...
- BAT大佬推荐使用的HTML5的十个功能
HTML5不是新事物.自从最初发布(2008年1月)以来,我们一直在使用它的一些功能.后来,我再次仔细查看了HTML5功能列表.看到我发现了什么?到目前为止,我还没有真正使用过它! 在本文中,我列出了 ...
- 15 Best Responsive HTML5 Frameworks 2014
Best HTML5 frameworks are most popular because with the use of these frameworks you can create websi ...
- 开销是有益的:AppCan 至HTML5移动创新和创业精神和健康
2014年移动创业更趋向理性,消费级App市场接近饱和,BAT等巨头的竞争更加激烈,市场版图及格局基本定型.而企业级移动应用却迎来爆发增长,替代进入红海的消费级App市场,企业级定制APP开发成为 ...
随机推荐
- Android开发之时间日期2
昨天给大家分享了一个时间和日期设置的小例子,今天发现Android的布局组件中有关于时间和日期的设置的组件,废话不多说,先给大家分享一下我的经验. 时间日期设置组件:TimePicker.DatePi ...
- 【目录】微软Infer.NET机器学习组件文章目录
本博客所有文章分类的总目录链接:http://www.cnblogs.com/asxinyu/p/4288836.html 1.微软Infer.NET机器学习组件目录 1. Infer.NET连载(一 ...
- ASP.NET MVC 4中如何为不同的浏览器自适应布局和视图
在ASP.NET MVC 4中,可以很简单地实现针对不同的浏览器自适应布局和视图.这个得归功于MVC中的"约定甚于配置"的设计理念. 默认的自适应 MVC 4自动地为移动设备浏览器 ...
- 面试准备 - 最大堆的Csharp实现
面试中最常见的问题之一...在N个数中间寻找前K大个元素 最常见的解法就是最大堆 时间复杂度O(N*log(K)) 空间复杂度O(k) 实现了一个最简单的最大堆,每次有元素进来都和堆顶元素比较一下,如 ...
- Cocos2d-x 3.2 学习笔记(十三)CocoStudio UI编辑器 by 保卫萝卜
关于编辑器部分研究的不多,但基本能使用.最近时间不是很多,因此写blog的次数越来越少了.自从玩了<保卫萝卜>时候一直想要写一下,同时练下手感.基本的结构已经写的差不多了,主要完善写UI和 ...
- nodejs图片转换字节保存
fs.readFile('上传图片路径', function(err, data) { if (err) { // 错误处理 return; } var base64str = new Buffer( ...
- 应用在tomcat下的四种部署方式(原创)
1.XML主动部署 2.XML自动部署 3.WAR自动部署 4.DIR自动部署 主动部署就是在server中配置部署,自动部署不需要在server中部署. 自动部署要比主动部署多一些功能,例如监测特定 ...
- 【Java基础】RTTI与反射之Java
一.引言 很多时候我们的程序可能需要在运行时识别对象和类的信息,比如多态就是基于运行时环境进行动态判断实际引用的对象.在运行时识别对象和类的信息主要有两种方式:1.RTTI,具体是Class对象,它假 ...
- 原生js写的贪吃蛇网页版游戏特效
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <bo ...
- Windows Azure Web Site (11) 使用源代码管理器管理Azure Web Site
<Windows Azure Platform 系列文章目录> 熟悉Azure Web Site平台的读者都知道,我们可以通过FTP等方式,把本地的Web Application部署到微软 ...