做一个能自适应高度的textarea的示例代码


Posted in HTML / CSS onSeptember 06, 2019

方法

1. HTML结构:

<div id="container">
        <textarea rows="1"></textarea>
    </div>

2. CSS代码:

* {
            padding: 0;
            margin: 0;
        }

        #container {
            width: 300px;
            padding: 10px;
            border: 1px solid #eee;
            box-sizing: border-box;
        }

        textarea {
            display: block;
            width: 100%;
            font-size: 20px;
            color: #000;
            line-height: 24px;
            outline: none;
            border: none;
            resize: none;
        }

3. JS代码:

       

var textarea = document.querySelector('textarea')
        var inpnt = (function () {
            var baseHeight = null

            return function () {
                !baseHeight && (baseHeight = this.scrollHeight)
                this.rows = 1
                var rows = Math.ceil(this.scrollHeight / baseHeight) >= 3 ? 3 : Math.ceil(this
                    .scrollHeight / baseHeight)

                this.rows = rows
            }
        })()

        textarea.oninput = debounce(inpnt, 100)

        function debounce(func, delay) {
            var timer = null

            return function () {
                var _this = this
                var args = arguments

                timer && clearTimeout(timer)
                timer = setTimeout(function () {
                    func.apply(_this, args)
                }, delay)
            }
        }

原理

!baseHeight && (baseHeight = this.scrollHeight)
                this.rows = 1
                var rows = Math.ceil(this.scrollHeight / baseHeight) >= 3 ? 3 : Math.ceil(this
                    .scrollHeight / baseHeight)

 
                this.rows = rows

第一行 获取基准高度 缓存起

第二行 重点 将textarea的rows设置成1 这样就能得到当前textarea的scrollHeight

第三行 拿到了当前textarea的scrollHeight 就可以算出rows

第四行 设置textarea的rows

通过设置textarea的rows属性来改变textarea的高度。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

HTML / CSS 相关文章推荐
基于css3实现漂亮便签样式
Mar 18 HTML / CSS
css3教程之倾斜页面
Jan 27 HTML / CSS
css3实现文字扫光渐变动画效果的示例
Nov 07 HTML / CSS
css3一个简易的 LED 数字时钟实现方法
Jan 15 HTML / CSS
CSS3实现苹果手机解锁的字体闪亮效果示例
Jan 05 HTML / CSS
详解HTML5中的标签
Jun 19 HTML / CSS
HTML5 b和i标记将被赋予真正的语义
Jul 16 HTML / CSS
HTML5 Canvas锯齿图代码实例
Apr 10 HTML / CSS
HTML5进度条特效
Dec 18 HTML / CSS
怎样实现H5+CSS3手指滑动切换图片的示例代码
May 05 HTML / CSS
HTML5 3D旋转相册的实现示例
Dec 03 HTML / CSS
html5 video全屏播放/自动播放的实现示例
Aug 06 HTML / CSS
3种方式实现瀑布流布局小结
Sep 05 #HTML / CSS
Html5 页面适配iPhoneX(就是那么简单)
Sep 05 #HTML / CSS
html5 外链式实现加减乘除的代码
Sep 04 #HTML / CSS
three.js模拟实现太阳系行星体系功能
Sep 03 #HTML / CSS
HTML5 3D书本翻页动画的实现示例
Aug 28 #HTML / CSS
详解canvas绘制网络字体几种方法
Aug 27 #HTML / CSS
前端实现打印图像功能
Aug 27 #HTML / CSS
You might like
约瑟夫环问题的PHP实现 使用PHP数组内部指针操作函数
2010/10/12 PHP
使用Appcan客户端自动更新PHP版本号(全)
2015/07/31 PHP
js,jQuery 排序的实现代码,网页标签排序的实现,标签排序
2011/04/27 Javascript
javascript实现通过表格绘制颜色填充矩形的方法
2015/04/21 Javascript
用JS实现轮播图效果(二)
2016/06/26 Javascript
Vue生命周期示例详解
2017/04/12 Javascript
jquery实现tab选项卡切换效果(悬停、下方横线动画位移)
2017/05/05 jQuery
利用require.js与angular搭建spa应用的方法实例
2017/07/19 Javascript
vue mixins组件复用的几种方式(小结)
2017/09/06 Javascript
swiper动态改变滑动内容的实现方法
2018/01/17 Javascript
JavaScript new对象的四个过程实例浅析
2018/07/31 Javascript
vuejs 制作背景淡入淡出切换动画的实例
2018/09/01 Javascript
判断js数据类型的函数实例详解
2019/05/23 Javascript
JS实现容器模块左右拖动效果
2020/01/14 Javascript
react项目从新建到部署的实现示例
2021/02/19 Javascript
[04:10]2018年度CS GO玩家最喜爱的主播-完美盛典
2018/12/16 DOTA
Python中除法使用的注意事项
2014/08/21 Python
Python爬取附近餐馆信息代码示例
2017/12/09 Python
Python实现简单http服务器
2018/04/12 Python
详解windows python3.7安装numpy问题的解决方法
2018/08/13 Python
django项目简单调取百度翻译接口的方法
2019/08/06 Python
Python高级编程之继承问题详解(super与mro)
2019/11/19 Python
python爬虫添加请求头代码实例
2019/12/28 Python
Python3 selenium 实现QQ群接龙自动化功能
2020/04/17 Python
python在一个范围内取随机数的简单实例
2020/08/16 Python
python3将变量输入的简单实例
2020/08/19 Python
Python字符串三种格式化输出
2020/09/17 Python
详解CSS3原生支持div铺满浏览器的方法
2018/08/30 HTML / CSS
英国最大的百货公司:Harrods
2016/08/18 全球购物
Europcar葡萄牙:葡萄牙汽车和货车租赁
2017/10/13 全球购物
AJax面试题
2014/11/25 面试题
计生专干事迹
2014/05/28 职场文书
电子商务优秀毕业生求职信
2014/07/11 职场文书
运动会广播稿100字
2014/09/14 职场文书
mybatis中注解与xml配置的对应关系和对比分析
2021/08/04 Java/Android
解决MySQL添加新用户-ERROR 1045 (28000)的问题
2022/03/03 MySQL