自动改变大小的textarea

最新推荐文章于 2024-06-07 09:53:05 发布

原创最新推荐文章于 2024-06-07 09:53:05 发布 · 616 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #java #c# #ViewUI

javascript 专栏收录该内容

6 篇文章

订阅专栏

本文介绍了一种用于自动调整文本区域大小的技术，该技术源自Facebook，并进行了适当的修改。通过应用此方法，文本区域能够根据输入内容自动调整高度，提供更流畅的用户体验。

基本来自 https://github.com/jaz303/jquery-grab-bag/blob/master/javascripts/jquery.autogrow-textarea.js 略有修改

/*
Auto-growing textareas; technique ripped from Facebook
(Textarea need set style "overflow:hidden" under IE)
*/
(function($) {
function times(string, number) {
  for (var i = 0, r = ''; i < number; i ++) r += string;
  return r;
}

$.fn.autogrow = function(options) {
  this.filter('textarea').each(function() {
    this.timeoutId = null;
    var $this = $(this), minHeight = $this.height();
    var shadow = $('<div></div>').css({
      position:   'absolute',
      wordWrap:   'break-word',
      top:        0,
      left:       -9999,
      display:    'none',
      width:      $this.width(),
      fontSize:   $this.css('fontSize'),
      fontFamily: $this.css('fontFamily'),
      lineHeight: $this.css('lineHeight')
    }).appendTo(document.body);

    var update = function() {
      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(), minHeight));
    }
    
    var updateTimeout = function() {
      clearTimeout(this.timeoutId);
      var that = this;
      this.timeoutId = setTimeout(function(){ update.apply(that); }, 100);
    };

    $(this).change(update).keyup(updateTimeout).keydown(updateTimeout);
    update.apply(this);
  });
  return this;
}
})(jQuery);

使用例子：

<!DOCTYPE HTML>
<html>
<head>
<script src="jquery.js"></script>
<script src="jquery.autogrow.textarea.js"></script>
<script type="text/javascript" language="javascript">
$(function() {
$("textarea").autogrow();
});
</script>
</head>
<body>
  <textarea id="t1" style="overflow:hidden"></textarea>
</body>
</html>