做一个能自适应高度的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垂直手风琴菜单
Jun 28 HTML / CSS
CSS3 简写animation
May 10 HTML / CSS
CSS3悬停效果案例应用
Nov 21 HTML / CSS
目前不被任何主流浏览器支持的CSS3属性汇总
Jul 21 HTML / CSS
CSS3提交意见输入框样式代码
Oct 30 HTML / CSS
CSS3的颜色渐变效果的示例代码
Sep 29 HTML / CSS
css3利用transform变形结合事件完成扇形导航
Oct 26 HTML / CSS
html5 canvas 简单画板实现代码
Jan 05 HTML / CSS
canvas探照灯效果的示例代码
Nov 30 HTML / CSS
html svg生成环形进度条的实现方法
Sep 23 HTML / CSS
基于CSS3画一个iPhone
Apr 21 HTML / CSS
使用 CSS 轻松实现一些高频出现的奇形怪状按钮
Dec 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
thinkPHP下ueditor的使用方法详解
2015/12/26 PHP
php实现微信公众号主动推送消息
2015/12/31 PHP
Symfony2获取web目录绝对路径、相对路径、网址的方法
2016/11/14 PHP
搭建PhpStorm+PhpStudy开发环境的超详细教程
2020/09/17 PHP
jQuery源码分析-05异步队列 Deferred 使用介绍
2011/11/14 Javascript
js函数名与form表单元素同名冲突的问题
2014/03/07 Javascript
jQuery 复合选择器应用的几个例子
2014/09/11 Javascript
JavaScript中合并数组的N种方法
2014/09/16 Javascript
JavaScript 事件绑定及深入
2015/04/13 Javascript
基于javascript实现简单的抽奖系统
2020/04/15 Javascript
基于jQuery的ajax方法封装
2016/07/14 Javascript
完美实现js焦点轮播效果(二)(图片可滚动)
2017/03/07 Javascript
JS仿Base.js实现的继承示例
2017/04/07 Javascript
基于构造函数的五种继承方法小结
2017/07/27 Javascript
vue router 配置路由的方法
2018/07/26 Javascript
ES6 更易于继承的类语法的使用
2019/02/11 Javascript
Python备份Mysql脚本
2008/08/11 Python
Python程序语言快速上手教程
2012/07/18 Python
浅谈django model的get和filter方法的区别(必看篇)
2017/05/23 Python
Python安装官方whl包和tar.gz包的方法(推荐)
2017/06/04 Python
对python 矩阵转置transpose的实例讲解
2018/04/17 Python
python使用正则筛选信用卡
2019/01/27 Python
WIn10+Anaconda环境下安装PyTorch(避坑指南)
2019/01/30 Python
Python基础之变量基本用法与进阶详解
2020/01/03 Python
Python对象的属性访问过程详解
2020/03/05 Python
详解Python3中的 input() 函数
2020/03/18 Python
linux mint中搜狗输入法导致pycharm卡死的问题
2020/10/28 Python
ROSEFIELD手表荷兰官方网上商店:北欧极简设计女士腕表品牌
2018/01/24 全球购物
世界上最受欢迎的花店:1-800-Flowers.com
2020/06/01 全球购物
J2EE系统只能是基于web
2015/09/08 面试题
安全协议书
2014/04/23 职场文书
小班幼儿评语大全
2014/04/30 职场文书
2015元旦家电促销活动策划方案
2014/12/09 职场文书
2014年信息技术工作总结
2014/12/16 职场文书
乒乓球比赛通知
2015/04/27 职场文书
详解用Python把PDF转为Word方法总结
2021/04/27 Python