jQuery的 - Textarea自動增長插件跨瀏覽器兼容

我需要一個跨瀏覽器兼容的插件for textrea是自動增長和收縮，當內部文本被寫入或刪除。jQuery的 - Textarea自動增長插件跨瀏覽器兼容

我試過了Elastic插件和padolsey autoresize的。在Firefox 3.6中都失敗了。

來源

2012-03-20 Jaideep Singh

jQuery的expandable -

甲jQuery插件，自動擴展文本域以適合的內容作爲用戶類型

這是另一個大的textarea自動不斷增長的插件寫在@Lashae已經發布的同樣的方法上，但只有少量額外的功能，比如動畫。

來源

2012-03-27 08:36:04

我一直在使用的片段在：Autogrow script @ Javascript Bindings for the Google AppEngine Data Store Project on Google Code

以防萬一的URL可能已關閉或刪除，在這裏不用代碼：

(function($) { 

/* 
* Auto-growing textareas; technique ripped from Facebook 
*/ 
$.fn.autogrow = function(options) { 

    this.filter('textarea').each(function() { 

     var $this  = $(this), 
      minHeight = $this.height(), 
      lineHeight = $this.css('lineHeight'); 

     var shadow = $('<div></div>').css({ 
      position: 'absolute', 
      top:  -10000, 
      left:  -10000, 
      width:  $(this).width() - parseInt($this.css('paddingLeft')) - parseInt($this.css('paddingRight')), 
      fontSize: $this.css('fontSize'), 
      fontFamily: $this.css('fontFamily'), 
      lineHeight: $this.css('lineHeight'), 
      resize:  'none' 
     }).appendTo(document.body); 

     var update = function() { 

      var times = function(string, number) { 
       for (var i = 0, r = ''; i < number; i ++) r += string; 
       return r; 
      }; 

      var val = this.value.replace(/</g, '&lt;') 
           .replace(/>/g, '&gt;') 
           .replace(/&/g, '&amp;') 
           .replace(/\n$/, '<br/>&nbsp;') 
           .replace(/\n/g, '<br/>') 
           .replace(/ {2,}/g, function(space) { return times('&nbsp;', space.length -1) + ' ' }); 

      shadow.html(val); 
      $(this).css('height', Math.max(shadow.height() + 20, minHeight)); 

     } 

     $(this).change(update).keyup(update).keydown(update); 

     update.apply(this); 

    }); 

    return this; 

} })(jQuery);

和使用，只需調用它的textareas你想自動增長。

實施例：

$('textarea').autogrow();

來源

2012-03-20 10:04:56 Lashae

它可以做像padolsey自動調整大小的小動畫做動畫調整：{時間：200} ，它可以順利 – 2012-03-20 10:32:13

這對我不起作用。在IE8中，我從一開始就得到了一個非常大的textarea（大約37行高度）。而且它不是自動調整。 – 2012-12-07 10:38:04

我已經更新了這一點...我修復了一個導致TA增長速度超過它應該的寬度錯誤。我還添加了一個窗口大小調整事件以允許響應。 http://jsfiddle.net/Troop4Christ/h4nmq8d4/ – RavenHursT 2014-10-06 17:31:07

在1.6+你不再需要一個插件來實現這一點，只需綁定change事件給這個函數，你的文字區域將擴大客客氣氣：

function form_autosize(this_element){ 

    //Catch the current scroll position to stop it from jumping about in some browsers 

    this_scroll = $(window).scrollTop(); 

    //Clear any existing height settings 

    $(this_element).css('height', ''); 

    //Set the textarea to scroll so that you can capture its height 

    $(this_element).css('overflow', 'scroll'); 

    //Set the element height to the current scroll height 

    $(this_element).height($(this_element).prop('scrollHeight')); 

    //Hide the scrollbars 

    $(this_element).css('overflow', 'hidden'); 

    //Re-apply the scroll position 

    $(window).scrollTop(this_scroll);

這似乎在Chrome最新版本很好地工作，Opera，Firefox和Safari。沒有試過它是互聯網資源管理器或更舊的版本呢。

合適的改變事件可能是：

$(this_element).on('keyup change paste', function() { form_autosize(this_element) });

來源

2012-07-08 10:29:39 notreadbyhumans

下面是根據上面的片段一個插件，但修復IE < = 8問題，並且還支持文字區域的水平生長。

https://github.com/dgbeck/jquery.autogrow-textarea

來源

2012-12-11 01:35:31

我做了這個方法，在jQuery的。

setInterval(function(){ 
     $(name_textarea).css('height', $(name_textarea)[0].scrollHeight+2+'px') 
},100);

試試吧，你可以在scrollHeight後面加上de號來獲得最好的結果。

來源

2014-01-16 12:44:26

我剛剛寫了一個角指令爲它（無jQuery的依賴），檢查出來：angular-autogrow directive（GitHub上）

來源

2015-04-23 00:06:02 Evyatar

jQuery的 - Textarea自動增長插件跨瀏覽器兼容

回答

相關問題