做一个能自适应高度的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教程(9):设置RGB颜色
Apr 02 HTML / CSS
css3气泡 css3关键帧动画创建的动态通知气泡
Feb 26 HTML / CSS
CSS3实现自定义Checkbox特效实例代码
Apr 24 HTML / CSS
利用HTML5+CSS3实现3D转换效果实例详解
May 02 HTML / CSS
CSS3下的渐变文字效果实现示例
Mar 02 HTML / CSS
css3实现椭圆轨迹旋转的示例代码
Oct 29 HTML / CSS
HTML5打开本地app应用的方法
Mar 31 HTML / CSS
HTML5 Canvas概述
Aug 26 HTML / CSS
用HTML5.0制作网页的教程
May 30 HTML / CSS
HTML5 绘制图像(上)之:关于canvas元素引领下一代web页面的问题
Apr 24 HTML / CSS
HTML5 visibilityState属性详细介绍和使用实例
May 03 HTML / CSS
CSS实现九宫格布局(自适应)的示例代码
Feb 12 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设计模式 Visitor 访问者模式
2011/06/28 PHP
详解PHP中的Traits
2015/07/29 PHP
jQuery.extend 函数详解
2012/02/03 Javascript
js自执行函数的几种不同写法的比较
2012/08/16 Javascript
js获取网页高度(详细整理)
2012/12/28 Javascript
js和as的稳定传值问题解决
2013/07/14 Javascript
js实现带搜索功能的下拉框实时搜索实时匹配
2013/11/05 Javascript
jQuery设置指定网页元素宽度和高度的方法
2015/03/25 Javascript
jquery实现图片左右切换的方法
2015/05/07 Javascript
JavaScript通过Date-Mask将日期转换成字符串的方法
2015/06/04 Javascript
jQuery支持添加事件的日历特效代码分享(3种样式)
2015/08/24 Javascript
Bootstrap轮播加上css3动画,炫酷到底!
2015/12/22 Javascript
jQuery实现文档树效果
2017/02/20 Javascript
关闭Vue计算属性自带的缓存功能方法
2018/03/02 Javascript
微信小程序仿微信运动步数排行(交互)
2018/07/13 Javascript
vue-cli项目修改文件热重载失效的解决方法
2018/09/19 Javascript
Nodejs中的require函数的具体使用方法
2019/04/02 NodeJs
解决node终端下运行js文件不支持ES6语法
2020/04/04 Javascript
JS绘图Flot如何实现动态可刷新曲线图
2020/10/16 Javascript
一起深入理解js中的事件对象
2021/02/06 Javascript
python类参数self使用示例
2014/02/17 Python
python使用suds调用webservice接口的方法
2019/01/03 Python
导入tensorflow时报错:cannot import name 'abs'的解决
2019/10/10 Python
浅析python内置模块collections
2019/11/15 Python
Python3如何判断三角形的类型
2020/04/12 Python
CSS3盒子模型详解
2013/04/24 HTML / CSS
教你使用Canvas处理图片的方法
2017/11/28 HTML / CSS
如何给HTML标签中的文本设置修饰线
2019/11/18 HTML / CSS
中国双语服务优势的在线购票及活动平台:247tickets
2018/10/26 全球购物
护士演讲稿范文
2014/01/05 职场文书
代理协议书
2014/04/22 职场文书
感恩教育月活动总结
2014/07/07 职场文书
企业财务人员岗位职责
2015/04/14 职场文书
居委会工作总结2015
2015/05/18 职场文书
社团招新宣传语
2015/07/13 职场文书