基于此开发文档: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实践的更多相关文章

  1. HTML5 history API实践

    一.history API知识点总结 在HTML4中,我们已经可以使用window.history对象来控制历史记录的跳转,可以使用的方法包括: history.forward();//在历史记录中前 ...

  2. 【转】39个让你受益的HTML5教程

    闲话少说,本文作者为大家收集了网上学习HTML5的资源,期望它们可以帮助大家更好地学习HTML5. 好人啊! 不过,作者原来说的40个只有39个,因为第5个和第8个是重复的. 原文在此! 1. 五分钟 ...

  3. 39个让你受益的HTML5教程

    1. 五分钟入门HTML5 (Learn HTML5 in 5 Minutes!) By Jennifer Marsman 毫无疑问,HTML5是一个热门话题.如果你需要一个迅速了解HTML基础的速成 ...

  4. 【HTML5 1】39个让你受益的HTML5教程

    闲话少说,本文作者为大家收集了网上学习HTML5的资源,期望它们能够帮助大家更好地学习HTML5. 好人啊! 只是,作者原来说的40个仅仅有39个,由于第5个和第8个是反复的. 原文在此! 1. 五分 ...

  5. 39一个可以让你受益HTML5课程

    事不宜迟,本文作者是我们收集的在线学习HTML5资源.我们希望他们能够帮助你更好地学习HTML5. 不错啊! 只,说原作者40一个只有39一.由于第一5钍和8一是重复. 原文在此! 1. 五分钟入门H ...

  6. 【转帖】39个让你受益的HTML5教程

    39个让你受益的HTML5教程                    闲话少说,本文作者为大家收集了网上学习HTML5的资源,期望它们可以帮助大家更好地学习HTML5. 好人啊! 不过,作者原来说的4 ...

  7. BAT大佬推荐使用的HTML5的十个功能

    HTML5不是新事物.自从最初发布(2008年1月)以来,我们一直在使用它的一些功能.后来,我再次仔细查看了HTML5功能列表.看到我发现了什么?到目前为止,我还没有真正使用过它! 在本文中,我列出了 ...

  8. 15 Best Responsive HTML5 Frameworks 2014

    Best HTML5 frameworks are most popular because with the use of these frameworks you can create websi ...

  9. 开销是有益的:AppCan 至HTML5移动创新和创业精神和健康

      2014年移动创业更趋向理性,消费级App市场接近饱和,BAT等巨头的竞争更加激烈,市场版图及格局基本定型.而企业级移动应用却迎来爆发增长,替代进入红海的消费级App市场,企业级定制APP开发成为 ...

随机推荐

  1. Java 集合系列目录(Category)

    下面是最近总结的Java集合(JDK1.6.0_45)相关文章的目录. 01. Java 集合系列01之 总体框架 02. Java 集合系列02之 Collection架构 03. Java 集合系 ...

  2. Java多线程系列--“JUC线程池”05之 线程池原理(四)

    概要 本章介绍线程池的拒绝策略.内容包括:拒绝策略介绍拒绝策略对比和示例 转载请注明出处:http://www.cnblogs.com/skywang12345/p/3512947.html 拒绝策略 ...

  3. tomcat匹配Servlet的流程(原创)

  4. JavaWeb:JavaBean基础

    JavaBean基础 JavaBean简介: 1.JavaBean是一种可以重复使用的类,可以没有用户界面,主要负责业务数据或者处理事物(数据运算.操作数据库) 2.与JSP配合,可以简化JSP代码. ...

  5. Sparse Filtering 学习笔记(一)网络结构与特征矩阵

      Sparse Filtering 是一个用于提取特征的无监督学习算法,与通常特征学习算法试图建模训练数据的分布的做法不同,Sparse Filtering 直接对训练数据的特征分布进行分析,在所谓 ...

  6. SQLServer学习笔记系列7

    一.写在前面的话 转眼又是周一,回想双休的日子,短暂而幸福,在阳光明媚的下午,可以自己做自己想做的任何事,惬意舒适,或读书,或运动,或音乐,当我们静下心来慢慢感受这些的时候,会突然发觉,原来生活是这么 ...

  7. JavaScript可否多线程? 深入理解JavaScript定时机制

    JavaScript的setTimeout与setInterval是两个很容易欺骗别人感情的方法,因为我们开始常常以为调用了就会按既定的方式执行, 我想不少人都深有同感, 例如 setTimeout( ...

  8. C#三种判断字符是否为汉字的方法

    判断一个字符是不是汉字通常有三种方法,第一种用 ASCII 码判断,第二种用汉字的 UNICODE 编码范围判 断,第三种用正则表达式判断,以下是具体方法. 1.用ASCII码判断 在 ASCII码表 ...

  9. ASP.NET Core 开发-Logging 使用NLog 写日志文件

    ASP.NET Core 开发-Logging 使用NLog 写日志文件. NLog 可以适用于 .NET Core 和 ASP.NET Core . ASP.NET Core已经内置了日志支持,可以 ...

  10. C#的变迁史 - C# 5.0 之调用信息增强篇

    Caller Information CallerInformation是一个简单的新特性,包括三个新引入的Attribute,使用它们可以用来获取方法调用者的信息, 这三个Attribute在Sys ...