使用HTML5中的contentEditable来将多行文本自动增高


Posted in HTML / CSS onMarch 01, 2016

contentEditable是由微软开发、被其他浏览器反编译并投入应用的一个全局属性。该属性的主要功能是允许用户编辑元素中的内容,所以该元素必须是可以获得鼠标焦点的元素,而且在点击鼠标后要向用户提供一个插入符号,提示用户该元素中的内容允许编辑。contentEditable属性是一个布尔值属性,可以被指定为true或false。

除此之外,该属性还有个隐藏的inherit(继承)状态,属性为true时,元素被指定为允许编辑;属性为false时,元素被指定为不允许编辑;未指定true或false时,则由inherit状态来决定,如果元素的父元素是可编辑的,则该元素就是可编辑的。

另外,除了contentEditable属性外,元素还具有一个isContentEditable属性,当元素可编辑时,该属性为true;当元素不可编辑时,该属性为false。
下面给出了一个使用contentEditable属性的示例,当列表元素被加上contentEditable属性后,该元素就变成可编辑的了,读者可自行在浏览器中对该示例进行试验。

XML/HTML Code复制内容到剪贴板
  1. <!DOCTYPE html>    
  2. <head>    
  3. <meta charset="UTF-8">    
  4. <title>conentEditalbe属性示例</title>    
  5. </head>    
  6. <h2>可编辑列表</h2>    
  7. <ul contentEditable="true">    
  8. <li>列表元素1</li>    
  9. <li>列表元素2</li>    
  10. <li>列表元素3</li>    
  11. </ul>   

这段代码运行后的结果如图:
使用HTML5中的contentEditable来将多行文本自动增高

行文本自动增高

谈到多行文本框,大家立刻就会想到使用textarea,使用textarea着实方便,但就是有一点不太好,不能自动增高,只能指定相应的列和行的字数或者直接css给高宽。

自动增高在某些时候还是需要的,比如类似发微博的输入框,它就是一个典型,需要这样的需求:文本框有个默认高度,输入文字超出这个高度后会自动增高,还要有一个最高的限度,超过这个限度以后就会出现垂直滚动条。

如果使用textarea来完成这个需求,还需要配合js来监听文本高度的变化来动态改变文本框的高度,这样就很不方便了,尤其是在移动端的时候就不科学了,这个时候就可以用上属性contenteditable了。

如:

XML/HTML Code复制内容到剪贴板
  1. <div contenteditable="true" class="box" id="box" >  
  2.                
  3. </div>  
  4. <style>  
  5. .box{width:200px;max-height:100px;border:1px solid #ccc;overflow-y:auto;overflow-x:hidden;}   
  6. </style>  

只要指定contenteditable属性值为true,div就变成可以编辑的了,并且会随着内容增加自动增高,然后我们给div一个最大高度,就可以实现上面所说的需求。

HTML / CSS 相关文章推荐
CSS3中利用animation属性创建雪花飘落特效
May 14 HTML / CSS
布局和排版教程 纯css3实现图片三角形排列
Oct 17 HTML / CSS
用CSS3的box-reflect设置文字倒影效果的方法讲解
Mar 07 HTML / CSS
css3类选择器之结合元素选择器和多类选择器用法
Mar 09 HTML / CSS
利用CSS3实现文字折纸效果实例代码
Jul 10 HTML / CSS
HTML5的语法变化介绍
Aug 13 HTML / CSS
canvas实现按住鼠标移动绘制出轨迹的示例代码
Feb 05 HTML / CSS
canvas中普通动效与粒子动效的实现代码示例
Jan 03 HTML / CSS
html5唤醒APP小记
Mar 27 HTML / CSS
canvas实现手机的手势解锁的步骤详细
Mar 16 HTML / CSS
深入理解margin塌陷和margin合并的解决方案
Jun 26 HTML / CSS
使用HBuilder制作一个简单的HTML5网页
Jul 07 HTML / CSS
解析HTML5中的新功能本地存储localStorage
Mar 01 #HTML / CSS
基于HTML5的齿轮动画特效
Feb 29 #HTML / CSS
HTML5中meta属性的使用方法
Feb 29 #HTML / CSS
HTML5+lufylegend实现游戏中的卷轴
Feb 29 #HTML / CSS
HTML5实现动画效果的方式汇总
Feb 29 #HTML / CSS
HTML5 Canvas实现图片缩放、翻转、颜色渐变的代码示例
Feb 28 #HTML / CSS
一波HTML5 Canvas基础绘图实例代码集合
Feb 28 #HTML / CSS
You might like
Ajax PHP 边学边练 之三 数据库
2009/11/26 PHP
php遍历目录viewDir函数
2009/12/15 PHP
利用php+mcDropdown实现文件路径可在下拉框选择
2013/08/07 PHP
ThinkPHP连接Oracle数据库
2016/04/22 PHP
PHP获取当前日期及本周一是几月几号的方法
2017/03/28 PHP
利用PHP_XLSXWriter代替PHPExcel的方法示例
2017/07/16 PHP
PHP接入微信H5支付的方法示例
2019/10/28 PHP
js 事件小结 表格区别
2007/08/13 Javascript
form表单中去掉默认的enter键提交并绑定js方法实现代码
2013/04/01 Javascript
js中单引号与双引号冲突问题解决方法
2013/10/04 Javascript
js加密解密字符串可自定义密码因子
2014/05/13 Javascript
实例解析jQuery中proxy()函数的用法
2016/05/24 Javascript
第五篇Bootstrap 排版
2016/06/21 Javascript
JS锚点的设置与使用方法
2016/09/05 Javascript
使用 Vue.js 仿百度搜索框的实例代码
2017/05/09 Javascript
JS实现点击Radio动态更新table数据
2017/07/18 Javascript
JavaScript使用闭包模仿块级作用域操作示例
2019/01/21 Javascript
基于Vue和Element-Ui搭建项目的方法
2019/09/06 Javascript
详解阿里Node.js技术文档之process模块学习指南
2021/01/04 Javascript
python数据抓取分析的示例代码(python + mongodb)
2017/12/25 Python
python自动重试第三方包retrying模块的方法
2018/04/24 Python
python解决字符串倒序输出的问题
2018/06/25 Python
pyshp创建shp点文件的方法
2018/12/31 Python
ActiveMQ:使用Python访问ActiveMQ的方法
2019/01/30 Python
python 获取sqlite3数据库的表名和表字段名的实例
2019/07/17 Python
浅谈keras使用预训练模型vgg16分类,损失和准确度不变
2020/07/02 Python
html5 input属性使用示例
2013/06/28 HTML / CSS
html5实现canvas阴影效果示例
2014/05/07 HTML / CSS
在加拿大在线租赁和购买电子游戏:Game Access
2019/09/02 全球购物
英国性能汽车零件和发动机配件在线:Maxpeedingrods
2019/11/05 全球购物
应届生法律求职信
2013/10/22 职场文书
保险专业大专生求职信
2013/10/26 职场文书
银行委托书范本
2014/04/04 职场文书
学生上课看漫画的检讨书
2014/09/26 职场文书
介绍信应该怎么开?
2019/04/03 职场文书
导游词之镇江焦山
2019/11/21 职场文书