自动改变大小的textarea

最新推荐文章于 2023-02-10 18:02:56 发布

alvinjj

最新推荐文章于 2023-02-10 18:02:56 发布

阅读量560

点赞数

分类专栏： javascript 文章标签： javascript java c# ViewUI

本文链接：https://blog.csdn.net/alvinjj/article/details/84043323

版权

javascript 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

基本来自 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>

alvinjj

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
自动改变大小的textarea

基本来自 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 "overf...
复制链接

扫一扫