说起输入框，大家都耳熟能详了，今天跟大家谈一谈H5时代的多行输入框！
首先一起回顾下输入框在PC端的应用：
PC端多行输入框的实现及问题
多行输入框，毫无疑问，大家都会想到表单元素textarea标签，在WEB应该用上常见的是评论输入框，微博信息输入框等，它们有着如下的共同点：
- 有默认高度（默认三行文字的高度）；
- 有最大高度；
- 超过最大高度即出现垂直滚动条；
- 在页面最顶端，有实际占位；
实现方法一：
比如:企鹅微博
方法一问题：由于超过默认高度后，高度需要实现随内容自动撑开的视觉效果。目前大部分的实现方法是：通过js检测是否产生滚动条来确定显示文本域的高度是否动态增加！对于不会js的小白有没有更适合的方案呢！当然有的！
方法二：div模拟textarea文本域及高度自适应
此种方法主要使用的是contenteditable标签属性，即允许用户编辑元素内容包含的任意文本，包括子元素！使用方法非常简单，只需要在block元素上加上contenteditable=”true”就可以了，如下demo:
免责声明：以上内容(如有图片或视频亦包括在内)有转载其他网站资源，如有侵权请联系删除
为你推荐
加载中...
