首页 > 其他分享 >JS历理 文本高度自适应

JS历理 文本高度自适应

时间:2024-08-05 23:17:56浏览次数:14  
标签:function autoHeight elem JS height 问君 清香 历理 文本

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>测试</title>
    <link rel="stylesheet" href="/_/_js/layui/css/layui.css">
    <link rel="stylesheet" href="/_/_css/base.css">
    <script src="/_/_js/layui/layui.js"></script>
    <script src="/_/_js/jquery-1.10.1.min.js"></script>
</head>
<body>
<textarea  autoHeight="true" style='overflow-y:hidden' class="layui-textarea">
阅谁问君诵,水落清香浮。
阅谁问君诵,水落清香浮。
阅谁问君诵,水落清香浮。
阅谁问君诵,水落清香浮。
阅谁问君诵,水落清香浮。
阅谁问君诵,水落清香浮。
阅谁问君诵,水落清香浮。
阅谁问君诵,水落清香浮。
阅谁问君诵,水落清香浮。
</textarea>
<script>
    $(function(){
        $.fn.autoHeight = function(){
            function autoHeight(elem){
                elem.style.height = 'auto';
                elem.scrollTop = 0; //防抖动
                elem.style.height = elem.scrollHeight + 'px';
            }
            this.each(function(){
                autoHeight(this);
                $(this).on('keyup', function(){
                    autoHeight(this);
                });
            });
        }
        $('textarea[autoHeight]').autoHeight();
    })
</script>
</body>
</html>

效果图:

标签:function,autoHeight,elem,JS,height,问君,清香,历理,文本
From: https://www.cnblogs.com/onestopweb/p/18344231

相关文章

  • 如何理解js的异步
    js是一门单线程的语言,这是因为他运行在浏览器的渲染主线程中,而渲染主线程只有一个,渲染主线程担任着诸多的工作,渲染页面、执行js、css、计时器等等都在其中运行。如果使用同步的方式,就很有可能会导致主线程堵塞,从而导致消息队列中的其它任务无法进行执行,这样一来,一方面会导致......
  • JSON parse error: Cannot deserialize instance of `java.lang.Long` out of START_O
    这个问题的实际原因就是:    后端id(Long类型)用的雪花算法生成主键id    后端生成id位:1820397662671867904    前端查询id的结果为:1820397662671868000产生的原因:    后端生成为19位,前端接受并展示,使用的类型是number类型是16位   ......
  • 从JS到Vue
    JavaScript-Vue JS引入方式基础语法输出语句 变量数据类型运算符函数对象ArrayStringJSONBOMWindowLocationDOM获取元素案例 事件事件绑定常见事件案例Vue快速入门指令v-bind和v-modelv-onv-if与v-showv-for案例生命周期 JS引入方式......
  • nodejs遇到的一个小问题分享给大家
    今天在调试项目的时候突然发现  const{name}=ctx.request.body 无法接收到参数了,后来检查了一下代码发现路由中间件和bodyparser中间件的加载顺序错了,导致无法接收参数,正确应该是这样:app.use(bodyParser());app.use(router.routes()).use(router.allowedMethods());......
  • 记一次JSF异步调用引起的接口可用率降低
    前言本文记录了由于JSF异步调用超时引起的接口可用率降低问题的排查过程,主要介绍了排查思路和JSF异步调用的流程,希望可以帮助大家了解JSF的异步调用原理以及提供一些问题排查思路。本文分析的JSF源码是基于JSF1,7.5-HOTFIX-T6版本。起因问题背景1.广告投放系统是典型的I/O密......
  • 《Three.JS零基础入门教程》第一篇:搭建开发环境
    本教程由新中地GIS开发高级讲师李俊杰老师出品,由浅入深,循序渐进,深入浅出的分析web3D中的核心概念。网格模型场景相机光影动画模型加载学习Three.js对于GIS开发是有很多帮助的。Three.js是一个基于JavaScript的3D图形库,它可以在网页上创建交互式的3D图形和动画效果。......
  • ssm基于web的楼房销售系统+jsp
    文章目录目录文章目录论文目录项目介绍开发环境系统实现论文参考论文目录1绪论1.1 研究背景1.2目的和意义1.3论文结构安排2 相关技术2.1SSM框架介绍2.2 B/S结构介绍2.3Mysql数据库介绍3系统分析3.1 系统可行性分析3.1.1技术可行性分......
  • ssm电动车上牌管理系统的设计与实现+jsp
    文章目录目录文章目录论文目录项目介绍开发环境系统实现论文参考论文目录1绪论1.1 研究背景1.2目的和意义1.3论文结构安排2 相关技术2.1SSM框架介绍2.2 B/S结构介绍2.3Mysql数据库介绍3系统分析3.1 系统可行性分析3.1.1技术可行性分......
  • nvm--node【 node.js version management】node.js的版本管理工具
    1.卸载node如果你已经安装了node,那么你需要先卸载node(不然安装nvm可能会失败),如果你没有安装那直接跳过这一步到下一步。打开控制面板->打开程序和功能->右上角搜索输入node->右键卸载为了确保彻底删除node在看看你的node安装目录中还有没有node文件夹,有的话一起删除。再......
  • js获取未来n天的时间并返回是否是今天,日期yyyy-mm-dd和星期
    js获取未来n天的时间.md2024.02.02(今天)如果传入5则获取未来5天的时间数组[ {date:"2024-02-02,"isToday:true,week:"星期五"}, {date:"2024-02-03,"isToday:false,week:"星期六"}, {date:"2024-02-04,"isToday:false,week:"星期日"......