使用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 相关文章推荐
全面解析CSS Media媒体查询使用操作(推荐)
Aug 15 HTML / CSS
CSS3 选择器 基本选择器介绍
Jan 21 HTML / CSS
一款利用css3的鼠标经过动画显示详情特效的实例教程
Dec 29 HTML / CSS
纯css3实现图片翻牌特效
Mar 10 HTML / CSS
浅谈css3中的前缀
Jul 20 HTML / CSS
CSS3 旋转立方体问题详解
Jan 09 HTML / CSS
纯html5+css3下拉导航菜单实现代码
Mar 18 HTML / CSS
HTML5调用手机摄像头拍照的实现思路及代码
Jun 15 HTML / CSS
基于Html5 canvas实现裁剪图片和马赛克功能及又拍云上传图片 功能
Jul 09 HTML / CSS
详解canvas.toDataURL()报错的解决方案全都在这了
Mar 31 HTML / CSS
video下autoplay属性无效的解决方法(添加muted属性)
May 19 HTML / CSS
Html5 webview元素定位工具的实现
Aug 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
ThinkPHP php 框架学习笔记
2009/10/30 PHP
php代码收集表单内容并写入文件的代码
2012/01/29 PHP
PHP批量查询WordPress留言者E-mail地址实现方法
2015/02/15 PHP
非常全面的php日期时间运算汇总
2015/11/04 PHP
php使用str_shuffle()函数生成随机字符串的方法分析
2017/02/17 PHP
PHP实现的激活用户注册验证邮箱功能示例
2017/06/06 PHP
sina的lightbox效果。
2007/01/09 Javascript
js window.event对象详尽解析
2009/02/17 Javascript
jQuery EasyUI API 中文文档 - TimeSpinner时间微调器
2011/10/23 Javascript
js禁止页面刷新禁止用F5键刷新禁止右键的示例代码
2013/09/23 Javascript
jQuery中element选择器用法实例
2014/12/29 Javascript
JavaScript 实现打印,打印预览,打印设置
2014/12/30 Javascript
JavaScript数组Array对象增加和删除元素方法总结
2015/01/20 Javascript
浅析JavaScript作用域链、执行上下文与闭包
2016/02/01 Javascript
jQuery中JSONP的两种实现方式详解
2016/09/26 Javascript
JS实现给json数组动态赋值的方法示例
2020/03/19 Javascript
vuejs实现标签选项卡动态更改css样式的方法
2018/05/31 Javascript
vue axios数据请求及vue中使用axios的方法
2018/09/10 Javascript
Vue实现 点击显示再点击隐藏效果(点击页面空白区域也隐藏效果)
2020/01/16 Javascript
[01:29:17]RNG vs Liquid 2019国际邀请赛淘汰赛 败者组 BO3 第二场 8.23
2019/09/05 DOTA
[03:17]DOTA2-DPC中国联赛1月29日Recap集锦
2021/03/11 DOTA
用python删除java文件头上版权信息的方法
2014/07/31 Python
Python命名空间详解
2014/08/18 Python
python中类和实例如何绑定属性与方法示例详解
2017/08/18 Python
使用python实现抓取腾讯视频所有电影的爬虫
2019/04/15 Python
Python综合应用名片管理系统案例详解
2020/01/03 Python
keras绘制acc和loss曲线图实例
2020/06/15 Python
关于tf.matmul() 和tf.multiply() 的区别说明
2020/06/18 Python
python如何求圆的面积
2020/07/01 Python
Python如何进行时间处理
2020/08/06 Python
Python3合并两个有序数组代码实例
2020/08/11 Python
无惧面试,带你搞懂python 装饰器
2020/08/17 Python
python如何实现word批量转HTML
2020/09/30 Python
美国修容界大佬创建的个人美妆品牌:Kevyn Aucoin Beauty
2018/12/12 全球购物
12岁生日感言
2014/01/21 职场文书
驻村工作简报
2015/07/20 职场文书