基于此开发文档: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. Geometry Surface of OpenCascade BRep

    Geometry Surface of OpenCascade BRep eryar@163.com 摘要Abstract:几何曲面是参数表示的曲面 ,在边界表示中其数据存在于BRep_TFace中, ...

  2. 栈-java代码

    import java.util.Arrays; public class StackDemo { private int maxSize; private long[] stackArray; pr ...

  3. Gumby – 基于 Sass 的灵活的,响应式 CSS 框架

    Gumby 框架是一个基于 SASS 的灵活的,响应式的 CSS 框架.可以借助其灵活,响应式的网格系统和 UI 套件快速创建逻辑的页面布局和应用程序原型. 您可能感兴趣的相关文章 35个让人惊讶的 ...

  4. 电路相关知识--读<<继电器是如何成为CPU的>>

    电路相关知识–读<<继电器是如何成为CPU的>> */--> *///--> *///--> 电路相关知识–读<<继电器是如何成为CPU的> ...

  5. Cordova webapp实战开发:(1)为什么选择 Cordova webapp?

    很长时间没有专注写代码了,即使写点代码也主要是写写敏捷个人app,这个App主体内容是我用了一周的时间,使用PhoneGap+JQueryMobile搭建的,之所以会比较快的完成,是因为11年我在做建 ...

  6. Android Activity返回键控制的两种方式

    Android Activity返回键监听的两种方式 1.覆写Activity的OnBackPressed方法 官方解释: Called when the activity has detected ...

  7. 在SQL Server里为什么我们需要更新锁

    今天我想讲解一个特别的问题,在我每次讲解SQL Server里的锁和阻塞(Locking & Blocking)都会碰到的问题:在SQL Server里,为什么我们需要更新锁?在我们讲解具体需 ...

  8. 将RichTextBox的内容直接写入数据库:

    将RichTextBox的内容直接写入数据库: private void button1_Click(object sender, EventArgs e) {    System.IO.Memory ...

  9. 正则表达式匹配a标签的href

    JS代码: <html> <head> <script language="javascript"> var a='<P><A ...

  10. 下一代USB接口将支持双向拔插,于明年亮相

    近日,USB接口标准制定组织表示新一代USB接口将于明年年中亮相,而其名称目前被暂定为了USB Type-C.该组织表示USB Type-C标准将允许制造商采用更纤薄的接口设计,在实用性大大提高的同时 ...