jquery实现textarea 高度自适应_jquery

之前给大家分享过用Javascript控制文本框textarea高度随内容自适应增长收缩,今天花了点时间换了种实现方法,总结一下

复制代码 代码如下:

jQuery.fn.extend({
            autoHeight: function(){
                return this.each(function(){
                    var $this = jQuery(this);
                    if( !$this.attr('_initAdjustHeight') ){
                        $this.attr('_initAdjustHeight', $this.outerHeight());
                    }
                    _adjustH(this).on('input', function(){
                        _adjustH(this);
                    });
                });
                /**
                 * 重置高度
                 * @param {Object} elem
                 */
                function _adjustH(elem){
                    var $obj = jQuery(elem);
                    return $obj.css({height: $obj.attr('_initAdjustHeight'), 'overflow-y': 'hidden'})
                            .height( elem.scrollHeight );
                }
            }
        });
        // 使用
        $(function(){
            $('textarea').autoHeight();
        });

以上就是本文所述的全部内容了,希望对大家学习jQuery能够有所帮助。

时间: 2024-12-02 20:56:27

jquery实现textarea 高度自适应_jquery的相关文章

jquery实现TextArea高度自适应代码

突然发现,textarea可以显示用户输入原生的元素.用一段js代码控制其高度即可,相关代码如下: 样式:  代码如下 复制代码 <style type="text/css"> .textarea{width:300px;border:0px;background:none;} </style> 模板数据绑定:  代码如下 复制代码 <textarea class='textarea'> </textarea> js代码:  代码如下 复

jquery实现iframe高度自适应代码

废话不多说,直接上代码. 一.父窗口代码  代码如下 复制代码 <iframe id="_case" src="case.html" width="300" height="0" frameborder="0" scrolling="no" ></iframe> 二.子窗口代码    代码如下 复制代码 <div id="relation"

jQuery解决iframe高度自适应代码_jquery

复制代码 代码如下: <script type="text/javascript"> <!-- $(     function()     {                          //iframe高度随内容自动调整         $('.main').load(          function()             {                 $(this).height($(this).contents().find("b

jquery 多行文本框(textarea)高度变化_jquery

复制代码 代码如下: $(function(){     var $comment = $('#comment');  //获取评论框      $('.bigger').click(function(){ //放大按钮绑定单击事件         if(!$comment.is(":animated")){ //判断是否处于动画            if( $comment.height() < 500 ){                  $comment.animate

EasyUI布局 高度自适应_jquery

最近在把以前写的一个项目改成用easyui做前端.过程中遇到了不少问题.其中一个就是datagrid不能很好的布局.想了好多办法都有局限.最后想到会不会是布局的问题,经过实践,最后问题解决. 1:比如在项目中用到了datagrid.如果界面比较简单---只有一个datagrid只需要把它的属性fit 设置为true就能实现自动适应窗体.如果在datagrid上方还有其他div的话,datagrid就不能很好的自动适应窗体.如查datagrid有分页控件,分页控件就看不到了.这个时候就应该用 ea

Jquery实现textarea根据文本内容自适应高度_jquery

在玩微博的时候我们可能会注意到一个细节就是不管是新浪微博还是腾讯微博在转发和评论的时候给你的默认文本框的高度都不会很高,这可能是版面的限制和用户通常只转播或者评论一个短句有关.但是当你输入超过一行文字的时候,文本框的高度就自动撑高了,大大改善了体验,这样用户就可以看到全部的文字.不用再去拖动文本框的滚动条. autoTextarea.js (function($){ $.fn.autoTextarea = function(options) { var defaults={ maxHeight:

文本框textarea高度随内容自适应增长收缩(js/jquery)

文本框textarea高度随内容自适应增长收缩(js/jquery) textarea高度随内容自适应增长收缩 方法一.   代码如下 复制代码 <HTML> <HEAD> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <TITLE>枫芸志 » 文本框textarea高度自适应增长/伸缩</TITLE> <sty

textarea如何实现高度自适应(不出现滚动条)?

今天需要些一个回复评论的页面,设计师给的初始界面就是一个只有一行的框.然后当时就想这个交互该怎么实现比较好,然后想起了新浪微博的做法:点击评论,默认显示一行,当输入的文字超过一行或者输入Enter时,输入框的高度会随着改变,直到输入完毕.顿时觉得这个细节做得挺不错的,可以效仿下.下面分享2种实现textarea高度自适应的做法,一种是用div来模拟textarea来实现的,用CSS控制样式,不用JS:另一种是利用JS控制的(因为存在浏览器兼容问题,所以写起来比较麻烦): 方法一:div模拟tex

javascript原生和jquery库实现iframe自适应高度和宽度_jquery

javascript原生和jquery库实现iframe自适应内容高度和宽度---推荐使用jQuery的代码! ‍<iframe src="index.php" id="mainiframe" name="mainiframe" width="100%" frameborder="0" scrolling="no" marginwidth="0" marginh