做一个能自适应高度的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背景下的@font face规则
May 04 HTML / CSS
CSS3实战第一波 让我们尽情的圆角吧
Aug 27 HTML / CSS
CSS3盒子模型详解
Apr 24 HTML / CSS
浅析与CSS3的loading动画加载相关的transition优化
May 18 HTML / CSS
CSS3之transition实现下划线的示例代码
May 30 HTML / CSS
css3动画鼠标放上图片逐渐变大鼠标离开图片逐渐缩小效果
Jan 27 HTML / CSS
html5实现完美兼容各大浏览器的播放器
Dec 26 HTML / CSS
基于html5 DeviceOrientation 实现微信摇一摇功能
Sep 25 HTML / CSS
HTML5学习笔记之html5与传统html区别
Jan 06 HTML / CSS
使用HTML5在网页中嵌入音频和视频播放的基本方法
Feb 22 HTML / CSS
canvas因为图片资源不在同一域名下而导致的跨域污染画布的解决办法
Jan 18 HTML / CSS
CSS实现两列布局的N种方法
Aug 02 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嵌套输出缓冲代码实例
2015/05/12 PHP
在Linux系统下一键重新安装WordPress的脚本示例
2015/06/30 PHP
ThinkPHP表单令牌错误的相关解决方法分析
2016/05/20 PHP
CCPry JS类库 代码
2009/10/30 Javascript
Ubuntu 11.10 安装Node.js的方法
2011/11/30 Javascript
form表单action提交的js部分与html部分
2014/01/07 Javascript
js图片跟随鼠标移动代码
2015/11/26 Javascript
js实现上一页下一页的效果【附代码】
2016/03/10 Javascript
jquery UI Datepicker时间控件的使用及问题解决
2016/04/28 Javascript
总结JavaScript设计模式编程中的享元模式使用
2016/05/21 Javascript
jQuery+ajax实现实用的点赞插件代码
2016/07/06 Javascript
纯js仿淘宝京东商品放大镜功能
2017/03/02 Javascript
vue父组件向子组件动态传值的两种方法
2017/11/11 Javascript
js中this的指向问题归纳总结
2018/11/28 Javascript
bootstrap-paginator服务器端分页使用方法详解
2020/02/13 Javascript
浅谈Python的文件类型
2016/05/30 Python
关于PyTorch源码解读之torchvision.models
2019/08/17 Python
Python中Unittest框架的具体使用
2019/08/27 Python
使用批处理脚本自动生成并上传NuGet包(操作方法)
2019/11/19 Python
解析PyCharm Python运行权限问题
2020/01/08 Python
VSCode基础使用与VSCode调试python程序入门的图文教程
2020/03/30 Python
Django与pyecharts结合的实例代码
2020/05/13 Python
基于PyTorch的permute和reshape/view的区别介绍
2020/06/18 Python
用python给csv里的数据排序的具体代码
2020/07/17 Python
Python 创建TCP服务器的方法
2020/07/28 Python
用python-webdriver实现自动填表的示例代码
2021/01/13 Python
Cotton On美国网站:澳洲时装连锁品牌
2016/10/25 全球购物
万宝龙英国官网:Montblanc手表、书写工具、皮革和珠宝
2018/10/16 全球购物
澳洲的UGG雪地靴超级市场:Uggs.com.au
2020/04/06 全球购物
普通大学毕业生自荐信范文
2014/02/23 职场文书
公司授权委托书
2014/04/04 职场文书
法人委托书范本格式
2014/09/15 职场文书
2014年化妆品销售工作总结
2014/12/01 职场文书
民主生活会汇报材料
2014/12/15 职场文书
2015年环卫工作总结
2015/04/28 职场文书
欧元符号 €
2022/02/17 杂记