做一个能自适应高度的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实现图片模糊过滤效果
Nov 19 HTML / CSS
CSS3标注引用的出处和来源的方法
Feb 25 HTML / CSS
浅析CSS3 用text-overflow解决文字排版问题
Oct 28 HTML / CSS
Html5画布_动力节点Java学院整理
Jul 13 HTML / CSS
HTML5实时语音通话聊天MP3压缩传输3KB每秒
Aug 28 HTML / CSS
HTML5的标签的代码的简单介绍 HTML5标签的简介
May 28 HTML / CSS
使用Html5实现异步上传文件,支持跨域,带有上传进度条
Sep 17 HTML / CSS
HTML5轻松实现全屏视频背景的示例
Apr 23 HTML / CSS
浅谈Html5页面打开app的一些思考
Mar 30 HTML / CSS
Html5让容器充满屏幕高度或自适应剩余高度的布局实现
May 14 HTML / CSS
CSS几步实现赛博朋克2077风格视觉效果
Jun 16 HTML / CSS
css清除浮动clearfix:after的用法详解(附完整代码)
May 21 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 如何向 MySQL 发送数据
2006/10/09 PHP
php 301转向实现代码
2008/09/18 PHP
php google或baidu分页代码
2009/11/26 PHP
php学习之function的用法
2012/07/14 PHP
Fatal error: Allowed memory size of 134217728 bytes exhausted (tried to allocate 2611816 bytes)
2014/11/08 PHP
使用PHP生成二维码的方法汇总
2015/07/22 PHP
jquery实现点击TreeView文本父节点展开/折叠子节点
2013/01/10 Javascript
Express.JS使用详解
2014/07/17 Javascript
node.js中使用socket.io制作命名空间
2014/12/15 Javascript
JS实现仿QQ效果的三级竖向菜单
2015/09/25 Javascript
深入浅析JavaScript中数据共享和数据传递
2016/04/25 Javascript
jQuery实现table中的tr上下移动并保持序号不变的实例代码
2016/07/11 Javascript
Three.js学习之文字形状及自定义形状
2016/08/01 Javascript
详谈for循环里面的break和continue语句
2017/07/20 Javascript
Angular4 ElementRef的应用
2018/02/26 Javascript
浅谈webpack组织模块的原理
2018/03/10 Javascript
JS使用正则表达式提交页面验证的代码
2019/10/16 Javascript
vue下canvas裁剪图片实例讲解
2020/04/16 Javascript
Python的Flask框架中配置多个子域名的方法讲解
2016/06/07 Python
Python与R语言的简要对比
2017/11/14 Python
Python获取当前函数名称方法实例分享
2018/01/18 Python
详解Python装饰器
2019/03/25 Python
Django Channels 实现点对点实时聊天和消息推送功能
2019/07/17 Python
Ubuntu+python将nii图像保存成png格式
2019/07/18 Python
pytorch方法测试——激活函数(ReLU)详解
2020/01/15 Python
python 调用API接口 获取和解析 Json数据
2020/09/28 Python
详解Django中异步任务之django-celery
2020/11/05 Python
Vans(范斯)德国官网:美国南加州的原创极限运动潮牌
2017/05/02 全球购物
德国消费电子产品购物网站:Guter Kauf
2020/09/15 全球购物
介绍一下javax.servlet.Servlet接口及其主要方法
2015/11/30 面试题
经典广告词大全
2014/03/14 职场文书
学校地质灾害防治方案
2014/06/10 职场文书
2014年四风问题自我剖析材料
2014/09/15 职场文书
义诊活动通知
2015/04/24 职场文书
卖车协议书范文
2016/03/23 职场文书
Ajax请求超时与网络异常处理图文详解
2021/05/23 Javascript