文章关键字 ‘contenteditable’

小tip: 如何让contenteditable元素只能输入纯文本

2016年01月7日,星期四

利用全浏览器都支持的contenteditable模拟文本域可以实现体验相当不错的高度跟随内容自动撑开的效果,但是呢,有个很大的问题就是HTML内容可以直接被粘贴进去,如果我们希望只能输入纯文本,该怎么做呢?本文提供了CSS侧,HTML侧以及JS侧三种不同的解决方法,希望可以对您的学习或者工作有所帮助!

阅读全文…

HTML5终极备忘大全(图片版+文字版)

2011年03月31日,星期四

顾名思意,本文内容算是个小炒,备忘录。主要备忘HTML5的一些内容,从元素到事件,到浏览器支持等。非图片版和文字版,图片版方便收藏,文字版方便传播与即时浏览。总之,希望本文的内容能够对您的学习有所帮助。

阅读全文…

style标签下的CSS代码的显示与实时编辑

2011年03月3日,星期四

本文讲的是如何让一段CSS代码可以在页面上显示,同时有可以修改,更关键的是修改的同时页面上对应元素的样式也跟着改变。文本内容不是很多很长,关键是展示这种不错的技术。跟以往的文章一样,提供demo页面,提供相应的截图以及必要的源代码展示。总之,希望能够对您的学习有所帮助。

阅读全文…

div模拟textarea文本域轻松实现高度自适应

2010年12月23日,星期四

textarea标签为表单元素,一般用在多行文字的输入。在web应用上常见的是评论输入框,微博信息输入框等。
作为多行文本域功能来讲,textarea满足了我们大部分的需求。然而,textarea有一个不足就是不能像普通div标签一样高度可以跟随内容自适应。textarea总是很自信地显摆它的滚动条,高度固执地岿然不动。所以,有时候,为了增加交互体验想让文本域高度自适应的时候,就会遇到麻烦。
然而,实际上,如果你要求不是很高,是个非常简便,且老少皆宜的实现方法的。这种方法就是使用普通的div标签模拟textarea文本域,同时又利用了div标签的高度自适应性。于是,textarea文本域的高度自适应效果就可以轻松实现。
本文就是讲述如何实现这种模拟的自适应效果的。提供代码展示,提供丰富飞截图,以及必要的demo实例页面,希望能对您的学习有所帮助。

阅读全文…