使用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圆角样式分享自定义按钮样式
Dec 27 HTML / CSS
css3 给页面加个半圆形导航条主要利用旋转和倾斜样式
Feb 10 HTML / CSS
CSS3中利用animation属性创建雪花飘落特效
May 14 HTML / CSS
详解css3 Transition属性(平滑过渡菜单栏案例)
Sep 05 HTML / CSS
利用CSS3的3D效果制作正方体
Mar 10 HTML / CSS
详解如何用canvas画一个微笑的表情
Mar 14 HTML / CSS
html5-websocket基于远程方法调用的数据交互实现
Dec 04 HTML / CSS
如何让IE9以下版本(ie6/7/8)认识html5元素
Apr 01 HTML / CSS
HTML5 自动聚焦(autofocus)属性使用介绍
Aug 07 HTML / CSS
HTML5仿微信聊天界面、微信朋友圈实例代码
Jan 29 HTML / CSS
canvas里面如何基于随机点绘制一个多边形的方法
Jun 13 HTML / CSS
localStorage的过期时间设置的方法详解
Nov 26 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
PHP 采集程序原理分析篇
2010/03/05 PHP
PHP学习笔记(二) 了解PHP的基本语法以及目录结构
2014/08/04 PHP
php实现微信公众平台账号自定义菜单类
2014/12/02 PHP
PHP爬虫之百万级别知乎用户数据爬取与分析
2016/01/22 PHP
Laravel手动分页实现方法详解
2016/10/09 PHP
PHP chop()函数讲解
2019/02/11 PHP
PHP+fiddler抓包采集微信文章阅读数点赞数的思路详解
2019/12/20 PHP
javascript Object与Function使用
2010/01/11 Javascript
JQUBAR1.1 jQuery 柱状图插件发布
2010/11/28 Javascript
JQUERY1.6 使用方法四 检测浏览器
2011/11/23 Javascript
阻止事件(取消浏览器对事件的默认行为并阻止其传播)
2013/11/03 Javascript
js实现省市联动效果的简单实例
2014/02/10 Javascript
JavaScript中getUTCSeconds()方法的使用详解
2015/06/11 Javascript
JQuery实现网页右侧随动广告特效
2016/01/17 Javascript
jQuery+CSS实现一个侧滑导航菜单代码
2016/05/09 Javascript
Nodejs之http的表单提交
2017/07/07 NodeJs
探究react-native 源码的图片缓存问题
2017/08/24 Javascript
vue利用axios来完成数据的交互
2018/03/23 Javascript
ES6关于Promise的用法详解
2018/05/07 Javascript
JavaScript根据json生成html表格的示例代码
2018/10/24 Javascript
解决layui数据表格Date日期格式的回显Object的问题
2019/09/19 Javascript
JavaScript实现轮播图片完整代码
2020/03/07 Javascript
Postman动态获取返回值过程详解
2020/06/30 Javascript
详解如何使用React Hooks请求数据并渲染
2020/10/18 Javascript
原生JavaScript实现进度条
2021/02/19 Javascript
[02:41]DOTA2英雄基础教程 谜团
2013/12/10 DOTA
Python数据结构与算法之图的最短路径(Dijkstra算法)完整实例
2017/12/12 Python
实例讲解Python脚本成为Windows中运行的exe文件
2019/01/24 Python
Python爬虫实现百度翻译功能过程详解
2020/05/29 Python
爬虫代理的cookie如何生成运行
2020/09/22 Python
客户代表自我评价范例
2013/09/24 职场文书
三八节标语
2014/06/27 职场文书
有限责任公司股东合作协议书
2014/12/02 职场文书
立项申请报告范本
2015/05/15 职场文书
2015年教师节广播稿
2015/08/19 职场文书
修辞手法有哪些?
2019/08/29 职场文书