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:0;right:0;bottom:0;border-top:solid 1px #dfdede;z-index:10;}
.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>
时间: 2024-11-17 01:00:08

HTML5 Content Editable实践的相关文章

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

闲话少说,本文作者为大家收集了网上学习HTML5的资源,期望它们能够帮助大家更好地学习HTML5. 好人啊! 只是,作者原来说的40个仅仅有39个,由于第5个和第8个是反复的. 原文在此! 1. 五分钟入门HTML5 (Learn HTML5 in 5 Minutes!)  By Jennifer Marsman 毫无疑问,HTML5是一个热门话题.假设你须要一个迅速了解HTML基础的速成课程,那这就是你须要的.我将介绍新的语义标签(markups). 使用canvas进行绘制和动画.视频(<v

39个让你受益的HTML5教程

闲话少说,本文作者为大家收集了网上学习HTML5的资源,期望它们能够帮助大家更好地学习HTML5. 好人啊! 只是,作者原来说的40个仅仅有39个,由于第5个和第8个是反复的. 原文在此! 1. 五分钟入门HTML5 (Learn HTML5 in 5 Minutes!)  By Jennifer Marsman 毫无疑问,HTML5是一个热门话题.假设你须要一个迅速了解HTML基础的速成课程,那这就是你须要的.我将介绍新的语义标签(markups). 使用canvas进行绘制和动画.视频(<v

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

39个让你受益的HTML5教程          闲话少说,本文作者为大家收集了网上学习HTML5的资源,期望它们可以帮助大家更好地学习HTML5. 好人啊! 不过,作者原来说的40个只有39个,因为第5个和第8个是重复的. 原文在此! 1. 五分钟入门HTML5 (Learn HTML5 in 5 Minutes!)  By Jennifer Marsman 毫无疑问,HTML5是一个热门话题.如果你需要一个迅速了解HTML基础的速成课程,那这就是你需要的.我将介绍新的语义标签(markups

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

闲话少说,本文作者为大家收集了网上学习HTML5的资源,期望它们可以帮助大家更好地学习HTML5. 好人啊! 不过,作者原来说的40个只有39个,因为第5个和第8个是重复的. 原文在此! 1. 五分钟入门HTML5 (Learn HTML5 in 5 Minutes!)  By Jennifer Marsman 毫无疑问,HTML5是一个热门话题.如果你需要一个迅速了解HTML基础的速成课程,那这就是你需要的.我将介绍新的语义标签(markups). 使用canvas进行绘制和动画.视频(<vi

15 Best Responsive HTML5 Frameworks 2014

Best HTML5 frameworks are most popular because with the use of these frameworks you can create website with less effort and time. HTML5 language has very useful and amazing Features, but a few parts are not boosted by this language, so we required HT

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

2014年移动创业更趋向理性,消费级App市场接近饱和,BAT等巨头的竞争更加激烈,市场版图及格局基本定型.而企业级移动应用却迎来爆发增长,替代进入红海的消费级App市场,企业级定制APP开发成为移动互联网下一个掘金地.企业级移动应用的蓝海也相同意味着开发人员可借鉴的经验少之又少.怎样借势借力,跨入企业级市场的门槛.成为众多中小团队迫切的需求. 在近日召开的iweb峰会上,正益无线王国春结合多年移动技术实践经验,做了题为<移动创新与创业,HTML5.Hybrid App.移动应用平台.MBAAS

正益王国春:AppCan 为HTML5移动创新与创业而生

2014年移动创业更趋向理性,消费级App市场接近饱和,BAT等巨头的竞争更加激烈,市场版图及格局基本定型.而企业级移动应用却迎来爆发增长,替代进入红海的消费级App市场,企业级定制APP开发成为移动互联网下一个掘金地.企业级移动应用的蓝海也同样意味着开发者可借鉴的经验少之又少,如何借势借力,跨入企业级市场的门槛,成为众多中小团队迫切的需求. 在近日召开的iweb峰会上,正益无线王国春结合多年移动技术实践经验,做了题为<移动创新与创业,HTML5.Hybrid App.移动应用平台.MBAAS

开发者应当了解的WebKit知识

开发者应当了解的WebKit知识 对一些开发者而言,WebKit就是一个黑盒子.丢进去HTML.CSS.JS等一连串的东西,而WebKit就能变魔术一般显示出一个很棒的网页出来.实际上,正我的同事IlyaGroriks提到的:   WebKit不但是白盒,而且是一个开放的白盒. 让我们花点时间来理解以下这些问题: 什么是WebKit?  什么不是WebKit?  浏览器是如何使用WebKit的?  为什么WebKit分支各不相同? 最近连Opera都转到WebKit平台上.下面的内容可以让你能够

总会有一个是你需要的

http://www.shouce.ren/post/d/id/112300 黑客攻防实战入门与提高.pdfhttp://www.shouce.ren/post/d/id/112299 黑客入门新手特训.pdfhttp://www.shouce.ren/post/d/id/112298 黑客与设计-剖析设计之美的秘密(彩印).pdfhttp://www.shouce.ren/post/d/id/112297 鸟哥的LINUX私房菜:服务器架设篇 (第二版).pdfhttp://www.shouc