做一个能自适应高度的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 Backgrounds属性相关介绍
May 11 HTML / CSS
布局和排版教程 纯css3实现图片三角形排列
Oct 17 HTML / CSS
CSS3 linear-gradient线性渐变生成加号和减号的方法
Nov 21 HTML / CSS
详解利用canvas实现环形进度条的方法
Jun 12 HTML / CSS
使用HTML5的Notification API制作web通知的教程
May 08 HTML / CSS
深入解析HTML5的IndexedDB索引数据库
Sep 14 HTML / CSS
字中字效果的实现【html5实例】
May 03 HTML / CSS
HTML5 canvas基本绘图之图形组合
Jun 27 HTML / CSS
详解Html5页面实现下载文件(apk、txt等)的三种方式
Oct 22 HTML / CSS
html5 datalist 选中option选项后的触发事件
Mar 05 HTML / CSS
CSS3点击按钮圆形进度打钩效果的实现代码
Mar 30 HTML / CSS
HTML5之高度塌陷问题的解决
Jun 01 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 array_filter除去数组中的空字符元素
2020/06/21 PHP
PHP中echo,print_r与var_dump区别分析
2014/09/29 PHP
php访问数组最后一个元素的函数end()用法
2015/03/18 PHP
PHP实现C#山寨ArrayList的方法
2015/07/16 PHP
PHP常用日期加减计算方法实例小结
2018/07/31 PHP
jQuery)扩展jQuery系列之一 模拟alert,confirm(一)
2010/12/04 Javascript
Jquery 返回json数据在IE浏览器中提示下载的问题
2014/05/18 Javascript
nodejs修复ipa处理过的png图片
2016/02/17 NodeJs
Javascript中call,apply,bind方法的详解与总结
2016/12/12 Javascript
微信小程序 跳转传递数据的实例
2017/07/06 Javascript
vue-cli 使用vue-bus来全局控制的实例讲解
2018/09/15 Javascript
详解@angular/cli 改变默认启动端口两种方式
2018/11/29 Javascript
微信小程序显示倒计时功能示例【测试可用】
2018/12/03 Javascript
fetch 如何实现请求数据
2018/12/20 Javascript
微信小程序云开发实现增删改查功能
2019/05/17 Javascript
微信小程序如何获取地址
2019/12/24 Javascript
[02:47]2018年度DOTA2最佳辅助位选手4号位-完美盛典
2018/12/17 DOTA
Python后台开发Django会话控制的实现
2019/04/15 Python
使用Python制作简单的小程序IP查看器功能
2019/04/16 Python
numpy数组之存取文件的实现示例
2019/05/24 Python
Python使用psutil获取进程信息的例子
2019/12/17 Python
Python爬虫与反爬虫大战
2020/07/30 Python
英国最大的汽车交易网站:Auto Trader UK
2016/09/23 全球购物
英国知名化妆品网站:Revolution Beauty(原TAM Beauty)
2018/02/28 全球购物
英国最大的正宗复古足球衫制造商和零售商:TOFFS
2018/06/21 全球购物
有abstract方法的类一定要用abstract修饰吗
2016/03/14 面试题
会计专业大学生求职信范文
2014/01/28 职场文书
期末学生评语大全
2014/04/24 职场文书
旷课检讨书500字
2014/10/14 职场文书
2014年电信员工工作总结
2014/12/19 职场文书
刑事附带民事代理词
2015/05/25 职场文书
班主任培训研修日志
2015/11/13 职场文书
《法国号》教学反思
2016/02/22 职场文书
Python语言规范之Pylint的详细用法
2021/06/24 Python
Python 实现Mac 屏幕截图详解
2021/10/05 Python
使用Spring处理x-www-form-urlencoded方式
2021/11/02 Java/Android