JS案例 - 可自动伸缩高度的textarea文本框
2024-10-19 01:19:56
文本框的默认现象:
- textarea如果设置cols和rows来规定textarea的尺寸,那么textarea的默认宽高是这俩属性设置的值,可以通过鼠标拖拽缩放文本框的尺寸。
- textarea如果设定了宽高,那么如果文本超出框的高度,会自动出现滚动条。而不会撑开文本框的高度。
- 如果什么也不设置,最小宽高很窄很细,随便输入内容也会超出文本框隐藏,且自动增加滚动条。
首先先做一些表面工作:
设置一些样式
width: 300px;
height: 300px;
border: 1px solid royalblue;
padding: 20px;
border-radius: 5px;
resize: none;
resize:none; 去掉右下角的这个可自动伸缩的样子和功能。
然后文字输入多了,默认就成了这样:
因为文本框的宽高固定死了, 还是超出出现了滚动条。
怎么让文本框初始化设置一定的高度,但是文字超出时自动跟随内容的高度伸缩?
答: 初始化高度通过css设置(如上),自动伸缩的高度值通过js来计算(如下)。
如果js计算的话,就需要事件触发,用change事件?
答:但是change事件体验不好。
为什么?
change事件的现象是,输入框失去焦点的时候才会触发。如果文本框内容超出高度然后用户还在输入的时候,体验就会很不好。而且如果用户一直不点击别的地方让textarea失去焦点,这个事件就永远不会触发,文本框的高度就不变。
比如输入过程中,就成了这样:
然后点击别的地方才会一次性的展开:
所以需要每次输入的时候就触发计算,就得用键盘事件而不是change事件:
键盘事件需要监听的是键每次弹起的时候,即keyup事件(刚才想了想,貌似监听keydown按压事件也不是不可以的)
每次事件触发的时候,需要做什么?
答:就是计算文本框的滚动高度,即内容高度
具体怎么做?
答:键盘每次弹起的时候,获取文本框的内容高度添加给文本框的高度,即可让其实时的跟随内容自适应。
内容高度用什么属性计算?
即:scrollHeight:给定对象的滚动高度,即内容的可视高度。
function textareaH(box){
let obj = $(box);
obj.style.height = obj.scrollHeight + 'px';
}
$('textarea').on('keyup',function(){
textareaH('textarea');
});
如果一个页面有多个textarea都需要这个怎么办?一个一个的加或者调用封装函数?
不用,可以在计算高度的时候获取多个,并循环计算:
function textareaH(){
let obj = $('textareaClass'),
len = obj.length;
for (let i = 0; i < len; i++) {
// console.log(obj[i]);
obj[i].style.height = 'auto';
obj[i].style.height = obj[i].scrollHeight + 'px';
}
}
2018-08-22 19:49:56
最新文章
- css实现一行文字居中,多行文字居左
- jQuery实现AJAX定时刷新局部页面实例
- VS2015链接错误一则
- vs2010编辑器中找不到System.Web.Extensions.dll
- Web 前端开发精华文章推荐(HTML5、CSS3、jQuery)【系列二十二】
- [MySQL Reference Manual] 7 备份和恢复
- C#中DataTable排序、检索、合并等操作实例
- [shell基础]——read命令
- Ruby类,模块1
- Java 字符转码之UTF-8转为GBK/GB2312
- c++中static的使用
- 从Qt4到Qt5的,主要的进化有三(对于QtWidget的精简和优化会很有限)
- Android Wear 开发入门——怎样创建一个手机与可穿戴设备关联的通知(Notification)
- 关于视频编辑SDK的接入说明
- Windows下使用console线连接思科交换机
- MongoDB 查询文档
- 如何使用Android Studio在安卓平台对Unity开发的应用进行性能检查?
- ZooKeeper连接并创建节点以及实现分布式锁操作节点排序输出最小节点Demo
- redis为什么这么火该怎么用
- Netty如何实现Reactor模式
热门文章
- CI框架 -- 核心文件 之 Model.php
- mothur trim.seqs 去除PCR引物
- linux中service的问题
- PHP数组排序函数array_multisort()函数详解(一)
- unity3d 使用GL 方式画线
- 【转】Spring Boot干货系列:(二)配置文件解析
- memcached系列之二
- Business vs Technology
- [Learn AF3]第二章 App Framework 3.0的组件View——AF3的驱动引擎
- Hopewell Project Sharing项目总结分享PPT