textarea自动扩展高度(jquery实现)

项目中用到了textarea自动扩展高度的功能,网上查了几个都不太完善,稍微修改了一下,主要是添加了当内容删除时候的自动减少高度功能。如需指定textarea,修改选择器即可。

$(document).on("input propertychange", "textarea", function (e) {
       var target = e.target;
       // 保存初始高度,之后需要重新设置一下初始高度,避免只能增高不能减低。
        var dh = $(target).attr(‘defaultHeight‘) || 0;
        if (!dh) {
            dh = target.clientHeight;
            $(target).attr(‘defaultHeight‘, dh);
        }

        target.style.height = dh +‘px‘;
        var clientHeight = target.clientHeight;
        var scrollHeight = target.scrollHeight;
        if (clientHeight !== scrollHeight) { target.style.height = scrollHeight + 10 + "px";
        }
    });
时间: 2024-08-25 10:34:24

textarea自动扩展高度(jquery实现)的相关文章

Jquery实现 TextArea 文本框根据输入内容自动适应高度

原文 Jquery实现 TextArea 文本框根据输入内容自动适应高度 在玩微博的时候我们可能会注意到一个细节就是不管是新浪微博还是腾讯微博在转发和评论的时候给你的默认文本框的高度都不会很高,这可能是版面的限制和用户通常只转播或者评论一个短句有关.但是当你输入超过一行文字的时候,TextArea自动适应高度,大大改善了体验,这样用户就可以看到全部的文字.不用再去拖动文本框的滚动条. 如下图: 这些在平时的项目中挺实用的,所以抽空封装了一个文本框根据输入内容自适应高度的插件 - TextArea

在ScrollView下加入的组件,不能自动扩展到屏幕高度

ScrollView中的组件设置android:layout_height="fill_parent"不起作用的解决办法 在ScrollView中添加一个android:fillViewport="true"属性就可以了.顾名思义,这个属性允许 ScrollView中的组件去充满它. 1 例子,在ScrollView下加入的组件,无论如何也不能自动扩展到屏幕高度. 2 3 布局文件. 4 5 [html] 6 <?xml version="1.0&q

如何让 textarea 文本框 高度自动伸缩

个人博客:柚子青年. 原文链接:如何让 textarea 文本框 高度自动伸缩 本文主要讲的是如何让 textarea 文本框 自动伸缩 原理:每次输入文字后重置文本框默认高度 判断是否出现滚动条 动态修改高度 . $(this).change(function () { this.style.height = 'height'; // height = textarea 默高度 if (this.scrollHeight >= this.offsetHeight) { // 判断是否出现滚动条

深入理解Azure自动扩展集VMSS(1)

前文中已经详细介绍了如何配置和部署Azure的虚拟机扩展集VMSS进行自动扩展,但在实际使用过程当中,用户会出现更进一步使用的一些问题,VMSS基本扩展原理及怎么简单调试?如何进行手动扩展?怎么使用自定义镜像?在设计的时候有哪些最佳实践和考量等等. 本文通过测试自动扩展功能开始,逐步介绍如下主题: VMSS自动扩展测试及告警规则配置 VMSS中Autoscale基本原理及诊断 VMSS实践及建议 VMSS手动扩展 VMSS中使用定制化镜像 VMSS自动扩展测试及邮件告警规则配置 在你初始创建了V

表空间自动扩展

表空间自动扩展失败的问题(表空间的增长量太高,ORACLE默认是50%),修改表空间文件扩展方式: SQL>ALTER DATABASE     DATAFILE '/u01/oracle/oradata/orcl/orcl.dbf' AUTOEXTEND     ON NEXT 50M MAXSIZE UNLIMITED

JS扩展 或 Jquery的扩展写法

<script>//JS扩展String函数test,其它类推String.prototype.test = function(s){ alert(this+s);}var str = 'hello';str.test('world');//helloworld //JQ扩展(function($){ $.fn.test = function(op){ var defaults = {a:'no'} var setings = $.extend(defaults,op); alert(seti

深入理解Azure自动扩展集VMSS(2)

VMSS中Auto Scale基本原理及诊断 在前面的介绍中,我们看到通过定义规则可以实现虚拟机扩展集的auto scale,那么在后台执行上VMSS的扩展依赖于哪些组件,出现问题(比如自动扩展没有发生的时候),我们在拨打400之前,如何快速的检查是否是配置问题? 本文简单介绍一下VMSS下auto scale的原理,以及出现问题如何快速的检查问题.下图展示了Azure的计算资源监控和数据收集机制,从数据源来讲,Azure的监控数据可以来自于应用程序,诊断日志,系统.自定义的指标数据,也包括审计

div模拟textarea以实现高度自适应实例页面

作为多行文本域功能来讲,textarea满足了我们大部分的需求.然而,textarea有一个不足就是不能像普通div标签一样高度可以跟随内容自适应.textarea总是很自信地显摆它的滚动条,高度固执地岿然不动.所以,有时候,为了增加交互体验想让文本域高度自适应的时候,就会遇到麻烦. <!DOCTYPE <!DOCTYPE html> <html> <head> <title>div模拟textarea以实现高度自适应实例页面</title>

CSS DIV自动适应高度

当div需要设定自适应高度时,可用到的css属性,min-height:200px;代表的是当div的内容超出了200px时,就会自动适应高度,兼容所有浏览器(IE6除外),如果是IE6则需要设置"_height" 代码: div{ _height:200px; min-height:200px; }