使用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 相关文章推荐
25个CSS3动画按钮和菜单教程分享
Oct 03 HTML / CSS
css3选择器基本介绍
Dec 15 HTML / CSS
基于CSS3实现的漂亮Menu菜单效果代码
Sep 10 HTML / CSS
CSS3制作漂亮的照片墙的实现代码
Jun 08 HTML / CSS
CSS3下的渐变文字效果实现示例
Mar 02 HTML / CSS
animation和transition的区别
Oct 12 HTML / CSS
Html5之svg可缩放矢量图形_动力节点Java学院整理
Jul 17 HTML / CSS
html5中canvas学习笔记1-画板的尺寸与实际显示尺寸
Jan 06 HTML / CSS
HTML5标签使用方法详解
Nov 27 HTML / CSS
详解android与HTML混合开发总结
Jun 06 HTML / CSS
详解如何获取localStorage最大存储大小的方法
May 21 HTML / CSS
基于CSS3画一个iPhone
Apr 21 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
phpmyadmin config.inc.php配置示例
2013/08/27 PHP
php header功能的使用
2013/10/28 PHP
浅谈json_encode用法
2015/03/05 PHP
Symfony核心类概述
2016/03/17 PHP
浅谈Laravel中的一个后期静态绑定
2017/08/11 PHP
javascript学习笔记(九) js对象 设计模式
2012/06/19 Javascript
JS动态添加option和删除option(附实例代码)
2013/04/01 Javascript
jQuery实现动画效果的实例代码
2013/05/07 Javascript
如何用JavaScript定义一个类
2014/09/12 Javascript
异步JavaScript编程中的Promise使用方法
2015/07/28 Javascript
ajax如何实现页面局部跳转与结果返回
2015/08/24 Javascript
微信小程序网络请求wx.request详解及实例
2017/05/18 Javascript
Vue 中使用vue2-highcharts实现top功能的示例
2018/03/05 Javascript
js/jquery遍历对象和数组的方法分析【forEach,map与each方法】
2019/02/27 jQuery
jQuery层叠选择器用法实例分析
2019/06/28 jQuery
Nuxt.js实战和配置详解
2019/08/05 Javascript
vue vant Area组件使用详解
2019/12/09 Javascript
three.js中多线程的使用及性能测试详解
2021/01/07 Javascript
[03:17]史诗级大片应援2018DOTA2国际邀请赛 致敬每一位坚守遗迹的勇士
2018/07/20 DOTA
[00:52]玛尔斯技能全介绍
2019/03/06 DOTA
python实现代理服务功能实例
2013/11/15 Python
Python的Flask框架中的Jinja2模板引擎学习教程
2016/06/30 Python
Python找出最小的K个数实例代码
2018/01/04 Python
Python3如何对urllib和urllib2进行重构
2019/11/25 Python
PyCharm 无法 import pandas 程序卡住的解决方式
2020/03/09 Python
PyCharm 2020.1版安装破解注册码永久激活(激活到2089年)
2020/09/24 Python
MVMT手表官方网站:时尚又实惠的高品质手表
2016/12/04 全球购物
建筑专业自荐信
2013/10/18 职场文书
安全生产汇报材料
2014/02/17 职场文书
政协调研汇报材料
2014/08/15 职场文书
2014年十一国庆节爱国演讲稿
2014/09/23 职场文书
2015年医务人员医德医风自我评价
2015/03/03 职场文书
法律意见书范本
2015/06/04 职场文书
2016年三八红旗手先进事迹材料
2016/02/26 职场文书
用Python爬取某乎手机APP数据
2021/06/15 Python
Python turtle编写简单的球类小游戏
2022/03/31 Python