创建具有自动调整大小的文本区域

2020/09/29 20:21 · javascript ·  · 0评论

关于这个另一个线程,我已经试过。但是有一个问题:textarea删除内容不会缩小。我找不到任何将其缩小到正确大小的方法-该clientHeight值以的完整大小返回textarea,而不是其内容的大小

该页面上的代码如下:

function FitToContent(id, maxHeight)
{
   var text = id && id.style ? id : document.getElementById(id);
   if ( !text )
      return;

   var adjustedHeight = text.clientHeight;
   if ( !maxHeight || maxHeight > adjustedHeight )
   {
      adjustedHeight = Math.max(text.scrollHeight, adjustedHeight);
      if ( maxHeight )
         adjustedHeight = Math.min(maxHeight, adjustedHeight);
      if ( adjustedHeight > text.clientHeight )
         text.style.height = adjustedHeight + "px";
   }
}

window.onload = function() {
    document.getElementById("ta").onkeyup = function() {
      FitToContent( this, 500 )
    };
}

这适用于我(Firefox 3.6 / 4.0和Chrome 10/11):

var observe;
if (window.attachEvent) {
    observe = function (element, event, handler) {
        element.attachEvent('on'+event, handler);
    };
}
else {
    observe = function (element, event, handler) {
        element.addEventListener(event, handler, false);
    };
}
function init () {
    var text = document.getElementById('text');
    function resize () {
        text.style.height = 'auto';
        text.style.height = text.scrollHeight+'px';
    }
    /* 0-timeout to get the already changed text */
    function delayedResize () {
        window.setTimeout(resize, 0);
    }
    observe(text, 'change',  resize);
    observe(text, 'cut',     delayedResize);
    observe(text, 'paste',   delayedResize);
    observe(text, 'drop',    delayedResize);
    observe(text, 'keydown', delayedResize);

    text.focus();
    text.select();
    resize();
}
textarea {
    border: 0 none white;
    overflow: hidden;
    padding: 0;
    outline: none;
    background-color: #D0D0D0;
}
<body onload="init();">
<textarea rows="1" style="height:1em;" id="text"></textarea>
</body>

如果您想在jsfiddle上尝试它,
它以一行开始,并且仅增长所需的确切数量。
可以使用一个
textarea,但是我想写一些这样textarea的东西(大约与一个大型文本文档中通常有行的东西一样)。在那种情况下,它真的很慢。(在Firefox中,它是如此之慢。)因此,我真的很想使用纯CSS的方法。使用,这是可能的contenteditable,但是我希望它只能是纯文本格式。

完整而简单的解决方案

2020年5
14日更新(改进了对手机和平板电脑的浏览器支持)

以下代码将起作用:

  • 按键输入。
  • 带有粘贴的文本(右键单击和Ctrl + v)。
  • 带有剪切文字(右键单击和Ctrl + x)。
  • 带有预加载的文本。
  • 在所有textarea (多行文本框)站点范围内。
  • 使用Firefox (已通过v31-67测试)。
  • 使用Chrome (已通过v37-74测试)。
  • 使用IE (已测试v9-v11)。
  • 使用Edge (已测试v14-v18)。
  • 使用IOS Safari
  • 使用Android浏览器
  • 使用JavaScript 严格模式
  • W3C验证。
  • 并且是精简而高效的。

选项1 (使用jQuery)

此选项需要的jQuery和已经过测试,并正在与1.7.2 - 3.3.1

简单 (将这个jquery代码添加到您的主脚本文件中,然后将其忽略。)

$('textarea').each(function () {
  this.setAttribute('style', 'height:' + (this.scrollHeight) + 'px;overflow-y:hidden;');
}).on('input', function () {
  this.style.height = 'auto';
  this.style.height = (this.scrollHeight) + 'px';
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<textarea placeholder="Type, paste, cut text here...">PRELOADED TEXT.
This javascript should now add better support for IOS browsers and Android browsers.</textarea>
<textarea placeholder="Type, paste, cut text here..."></textarea>

Test on jsfiddle


选项2 (纯JavaScript)

简单 (将此JavaScript添加到您的主脚本文件中,然后就不用管它了。)

const tx = document.getElementsByTagName('textarea');
for (let i = 0; i < tx.length; i++) {
  tx[i].setAttribute('style', 'height:' + (tx[i].scrollHeight) + 'px;overflow-y:hidden;');
  tx[i].addEventListener("input", OnInput, false);
}

function OnInput() {
  this.style.height = 'auto';
  this.style.height = (this.scrollHeight) + 'px';
}
<textarea placeholder="Type, paste, cut text here...">PRELOADED TEXT. This JavaScript should now add better support for IOS browsers and Android browsers.</textarea>
<textarea placeholder="Type, paste, cut text here..."></textarea>

Test on jsfiddle


选项3 (jQuery扩展)

如果要对要自动调整大小的文本区域应用进一步的链接,则很有用。

jQuery.fn.extend({
  autoHeight: function () {
    function autoHeight_(element) {
      return jQuery(element)
        .css({ 'height': 'auto', 'overflow-y': 'hidden' })
        .height(element.scrollHeight);
    }
    return this.each(function() {
      autoHeight_(this).on('input', function() {
        autoHeight_(this);
      });
    });
  }
});

调用 $('textarea').autoHeight()


通过JAVASCRIPT更新文本区域

通过JavaScript将内容注入文本区域时,请附加以下代码以调用选项1中的函数。

$('textarea').trigger('input');

预设TEXTAREA高度

要固定文本区域的初始高度,您需要添加其他条件:

const txHeight = 16;
const tx = document.getElementsByTagName("textarea");
for (let i = 0; i < tx.length; i++) {
  if (tx[i].value == '') {
    tx[i].setAttribute("style", "height:" + txHeight + "px;overflow-y:hidden;");
  } else {
    tx[i].setAttribute("style", "height:" + (tx[i].scrollHeight) + "px;overflow-y:hidden;");
  }
  tx[i].addEventListener("input", OnInput, false);
}

function OnInput(e) {
  this.style.height = "auto";
  this.style.height = (this.scrollHeight) + "px";
}
<textarea placeholder="Type, paste, cut text here...">PRELOADED TEXT. This JavaScript should now add better support for IOS browsers and Android browsers.</textarea>
<textarea placeholder="Type, paste, cut text here..."></textarea>

jQuery解决方案调整CSS以符合您的要求

CSS ...

div#container textarea {
    min-width: 270px;
    width: 270px;
    height: 22px;
    line-height: 24px;
    min-height: 22px;
    overflow-y: hidden; /* fixes scrollbar flash - kudos to @brettjonesdev */
    padding-top: 1.1em; /* fixes text jump on Enter keypress */
}

javascript ...

// auto adjust the height of
$('#container').delegate( 'textarea', 'keydown', function (){
    $(this).height( 0 );
    $(this).height( this.scrollHeight );
});
$('#container').find( 'textarea' ).keydown();

或jQuery 1.7+的替代...

// auto adjust the height of
$('#container').on( 'keyup', 'textarea', function (){
    $(this).height( 0 );
    $(this).height( this.scrollHeight );
});
$('#container').find( 'textarea' ).keyup();

我创建了一个带有绝对最小样式的小提琴作为您实验的起点...
http://jsfiddle.net/53eAy/951/

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Textarea autoresize</title>
    <style>
    textarea {
        overflow: hidden;
    }
    </style>
    <script>
    function resizeTextarea(ev) {
        this.style.height = '24px';
        this.style.height = this.scrollHeight + 12 + 'px';
    }

    var te = document.querySelector('textarea');
    te.addEventListener('input', resizeTextarea);
    </script>
</head>
<body>
    <textarea></textarea>
</body>
</html>

在Firefox 14和Chromium 18中进行了测试。数字24和12是任意的,请测试以找出最适合的数字。

您可以不使用style和script标签,但是imho有点混乱(这是旧样式HTML + JS,因此不推荐使用)。

<textarea style="overflow: hidden" onkeyup="this.style.height='24px'; this.style.height = this.scrollHeight + 12 + 'px';"></textarea>

编辑:现代化的代码。将onkeyup属性更改为addEventListener。

编辑:keydown比keyup

更好。Edit:


在使用前声明函数

Edit:input比keydown更好(thnx @ WASD42&@ MA-Maddin)

jsfiddle

对我来说最好的解决方案(可行且简短)是:

    $(document).on('input', 'textarea', function () {
        $(this).outerHeight(38).outerHeight(this.scrollHeight); // 38 or '1em' -min-height
    }); 

它就像一个饰物一样工作,没有粘贴(也有鼠标)闪烁,剪切,进入,并且缩小到正确的大小。

请看看jsFiddle

您正在使用当前clientHeight和内容scrollHeight中的较高值。当您通过删除内容来减小scrollHeight时,由于先前由style.height设置的clientHeight将其保持打开状态,因此无法减小计算区域。取而代之的是,您可以采用max()的scrollHeight和您已预定义或从textarea.rows计算出的最小高度值。

通常,您可能不应该真正依赖表单控件上的scrollHeight。传统上,除了scrollHeight不受其他IE扩展的广泛支持之外,HTML / CSS并没有说明如何在内部实现表单控件,并且不能保证scrollHeight会有意义。(传统上,某些浏览器使用OS窗口小部件来完成该任务,从而使CSS和DOM在其内部的交互成为不可能。)在尝试启用效果之前,至少要嗅探一下scrollHeight / clientHeight的存在。

如果在更广泛的范围内工作很重要,则可以避免该问题的另一种可能的替代方法可能是使用隐藏的div,其大小与文本区域的宽度相同,并设置为相同的字体。在键入时,将文本从文本区域复制到隐藏的div中的文本节点(请记住,用换行符替换'\ n',如果使用innerHTML,请正确转义'<'/'&')。然后只需测量div的offsetHeight就可以为您提供所需的高度。

如果您不需要支持IE8,则可以使用以下input事件:

var resizingTextareas = [].slice.call(document.querySelectorAll('textarea[autoresize]'));

resizingTextareas.forEach(function(textarea) {
  textarea.addEventListener('input', autoresize, false);
});

function autoresize() {
  this.style.height = 'auto';
  this.style.height = this.scrollHeight+'px';
  this.scrollTop = this.scrollHeight;
  window.scrollTo(window.scrollLeft,(this.scrollTop+this.scrollHeight));
}

现在,您只需要添加一些CSS即可完成:

textarea[autoresize] {
  display: block;
  overflow: hidden;
  resize: none;
}

用法:

<textarea autoresize>Type here and I’ll resize.</textarea>

您可以在我的博客文章中阅读有关它如何工作的更多信息

自动尺寸

https://github.com/jackmoore/autosize

可以独立运行的Just作品很受欢迎(截至2018年10月,已有3,000个 GitHub星标,可在cdnjs获得)和轻量级(〜3.5k)。演示:

<textarea id="autosize" style="width:200px;">a
J   b
c</textarea>
<script src="https://cdnjs.cloudflare.com/ajax/libs/autosize.js/4.0.2/autosize.min.js"></script>
<script>autosize(document.querySelectorAll('#autosize'));</script>

顺便说一句,如果您使用的是ACE编辑器,请使用maxLines: Infinity自动调整Ace Cloud 9编辑器中内容的高度

这里找到一个班轮;

<textarea name="text" oninput="this.style.height = ''; this.style.height = this.scrollHeight +'px'"></textarea>

是否有人认为内容可编辑?不会乱七八糟地滚动,并且我唯一喜欢的JS是如果您打算将数据保存为模糊的……显然,它与所有流行的浏览器兼容:http : //caniuse.com/#feat =内容可编辑

只需将其样式设置为看起来像文本框,然后它就会自动调整大小...将其最小高度设置为首选的文本高度并具有该高度。

这种方法最酷的是,您可以在某些浏览器上进行保存和标记。

http://jsfiddle.net/gbutiri/v31o8xfo/

var _auto_value = '';
$(document).on('blur', '.autosave', function(e) {
  var $this = $(this);
  if ($this.text().trim() == '') {
    $this.html('');
  }

  // The text is here. Do whatever you want with it.
  $this.addClass('saving');

  if (_auto_value !== $this.html() || $this.hasClass('error')) {

    // below code is for example only.
    $.ajax({
      url: '/echo/json/?action=xyz_abc',
      data: 'data=' + $this.html(),
      type: 'post',
      datatype: 'json',
      success: function(d) {
        console.log(d);
        $this.removeClass('saving error').addClass('saved');
        var k = setTimeout(function() {
          $this.removeClass('saved error')
        }, 500);
      },
      error: function() {
        $this.removeClass('saving').addClass('error');
      }
    });
  } else {
    $this.removeClass('saving');
  }
}).on('focus mouseup', '.autosave', function() {
  var $this = $(this);
  if ($this.text().trim() == '') {
    $this.html('');
  }
  _auto_value = $this.html();
}).on('keyup', '.autosave', function(e) {
  var $this = $(this);
  if ($this.text().trim() == '') {
    $this.html('');
  }
});
body {
  background: #3A3E3F;
  font-family: Arial;
}

label {
  font-size: 11px;
  color: #ddd;
}

.autoheight {
  min-height: 16px;
  font-size: 16px;
  margin: 0;
  padding: 10px;
  font-family: Arial;
  line-height: 20px;
  box-sizing: border-box;
  -o-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  overflow: hidden;
  display: block;
  resize: none;
  border: 0;
  outline: none;
  min-width: 200px;
  background: #ddd;
  max-height: 400px;
  overflow: auto;
}

.autoheight:hover {
  background: #eee;
}

.autoheight:focus {
  background: #fff;
}

.autosave {
  -webkit-transition: all .2s;
  -moz-transition: all .2s;
  transition: all .2s;
  position: relative;
  float: none;
}

.autoheight * {
  margin: 0;
  padding: 0;
}

.autosave.saving {
  background: #ff9;
}

.autosave.saved {
  background: #9f9;
}

.autosave.error {
  background: #f99;
}

.autosave:hover {
  background: #eee;
}

.autosave:focus {
  background: #fff;
}

[contenteditable=true]:empty:before {
  content: attr(placeholder);
  color: #999;
  position: relative;
  top: 0px;
  /*
    For IE only, do this:
    position: absolute;
    top: 10px;
    */
  cursor: text;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label>Your Name</label>
<div class="autoheight autosave contenteditable" contenteditable="true" placeholder="Your Name"></div>

有一种稍微不同的方法。

<div style="position: relative">
  <pre style="white-space: pre-wrap; word-wrap: break-word"></pre>
  <textarea style="position: absolute; top: 0; left: 0; width: 100%; height: 100%"></textarea>
</div>

想法是将文本从复制textarea到中,pre并让CSS确保它们具有相同的大小。

好处是框架提供了简单的工具来移动文本而不会发生任何事件。也就是说,在AngularJS你想补充ng-model="foo" ng-trim="false"textarea,并ng-bind="foo + '\n'"pre看到一个小提琴

只需确保该pre字体具有与相同的字体即可textarea

以下内容适用于剪切,粘贴等操作,无论这些操作是否来自鼠标,键盘快捷键,从菜单栏中选择一个选项……几种答案采用类似的方法,但它们并没有说明大小调整,这就是为什么他们错误地应用样式的原因overflow: hidden

我这样做,这也与运作良好max-height,并rows最小和最大高度。

function adjust() {
  var style = this.currentStyle || window.getComputedStyle(this);
  var boxSizing = style.boxSizing === 'border-box'
      ? parseInt(style.borderBottomWidth, 10) +
        parseInt(style.borderTopWidth, 10)
      : 0;
  this.style.height = '';
  this.style.height = (this.scrollHeight + boxSizing) + 'px';
};

var textarea = document.getElementById("ta");
if ('onpropertychange' in textarea) { // IE
  textarea.onpropertychange = adjust;
} else if ('oninput' in textarea) {
  textarea.oninput = adjust;
}
setTimeout(adjust.bind(textarea));
textarea {
  resize: none;
  max-height: 150px;
  border: 1px solid #999;
  outline: none;
  font: 18px sans-serif;
  color: #333;
  width: 100%;
  padding: 8px 14px;
  box-sizing: border-box;
}
<textarea rows="3" id="ta">
Try adding several lines to this.
</textarea>

为了绝对完整性,您应该adjust在其他几种情况下调用该函数:

  1. 窗口调整大小事件,如果宽度textarea随着窗口调整大小而改变,或者其他事件改变了文本区域的宽度
  2. textareadisplaystyle属性更改时,例如,它从none(隐藏)变为block
  3. textarea编程方式更改的值时

请注意,使用window.getComputedStyle或获取currentStyle可能在计算上有些昂贵,因此您可能需要缓存结果。

适用于IE6,所以我真的希望有足够的支持。

作为另一种方法,您可以使用<span>来自动调整其大小。您需要通过添加contenteditable="true"属性使其可编辑,然后完成:

div {
  width: 200px;
}

span {
  border: 1px solid #000;
  padding: 5px;
}
<div>
  <span contenteditable="true">This text can be edited by the user</span>
</div>

这种方法的唯一问题是,如果要将值作为表单的一部分提交,则必须自己使用JavaScript进行提交。这样做相对容易。例如,您可以添加一个隐藏字段,并在onsubmit表单的情况下将的值分配span给该隐藏字段,然后该字段将与表单一起自动提交。

我将以下代码用于多个文本区域。在Chrome 12,Firefox 5和IE 9中可以正常工作,即使在文本区域中执行了删除,剪切和粘贴操作也是如此。

function attachAutoResizeEvents() {
  for (i = 1; i <= 4; i++) {
    var txtX = document.getElementById('txt' + i)
    var minH = txtX.style.height.substr(0, txtX.style.height.indexOf('px'))
    txtX.onchange = new Function("resize(this," + minH + ")")
    txtX.onkeyup = new Function("resize(this," + minH + ")")
    txtX.onchange(txtX, minH)
  }
}

function resize(txtX, minH) {
  txtX.style.height = 'auto' // required when delete, cut or paste is performed
  txtX.style.height = txtX.scrollHeight + 'px'
  if (txtX.scrollHeight <= minH)
    txtX.style.height = minH + 'px'
}
window.onload = attachAutoResizeEvents
textarea {
  border: 0 none;
  overflow: hidden;
  outline: none;
  background-color: #eee
}
<textarea style='height:100px;font-family:arial' id="txt1"></textarea>
<textarea style='height:125px;font-family:arial' id="txt2"></textarea>
<textarea style='height:150px;font-family:arial' id="txt3"></textarea>
<textarea style='height:175px;font-family:arial' id="txt4"></textarea>

有点改正。在Opera中完美运作

  $('textarea').bind('keyup keypress', function() {
      $(this).height('');
      var brCount = this.value.split('\n').length;
      this.rows = brCount+1; //++ To remove twitching
      var areaH = this.scrollHeight,
          lineHeight = $(this).css('line-height').replace('px',''),
          calcRows = Math.floor(areaH/lineHeight);
      this.rows = calcRows;
  });

我知道用jquery实现此方法的一种简短正确的方法,不需要额外的隐藏div,并且可以在大多数浏览器中使用

<script type="text/javascript">$(function(){
$("textarea").live("keyup keydown",function(){
var h=$(this);
h.height(60).height(h[0].scrollHeight);//where 60 is minimum height of textarea
});});

</script>

我不知道是否有人提到这种方式,但是在某些情况下,可以通过行属性来调整高度

textarea.setAttribute('rows',breaks);

演示版

这是panzi的答案的angularjs指令。

 module.directive('autoHeight', function() {
        return {
            restrict: 'A',
            link: function(scope, element, attrs) {
                element = element[0];
                var resize = function(){
                    element.style.height = 'auto';
                    element.style.height = (element.scrollHeight)+'px';
                };
                element.addEventListener('change', resize, false);
                element.addEventListener('cut',    resize, false);
                element.addEventListener('paste',  resize, false);
                element.addEventListener('drop',   resize, false);
                element.addEventListener('keydown',resize, false);

                setTimeout(resize, 100);
            }
        };
    });

HTML:

<textarea ng-model="foo" auto-height></textarea>

您可以使用JQuery展开textarea键入内容:

$(document).find('textarea').each(function () {
  var offset = this.offsetHeight - this.clientHeight;

  $(this).on('keyup input focus', function () {
    $(this).css('height', 'auto').css('height', this.scrollHeight + offset);
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div>
<textarea name="note"></textarea>
<div>

那些想要在新版本的Angular中实现相同功能的人。

抓取textArea elementRef。

@ViewChild('textArea', { read: ElementRef }) textArea: ElementRef;

public autoShrinkGrow() {
    textArea.style.overflow = 'hidden';
    textArea.style.height = '0px';
    textArea.style.height = textArea.scrollHeight + 'px';
}

<textarea (keyup)="autoGrow()" #textArea></textarea>

我还添加了另一个用例,当用户想要将文本区域的高度增加到一定高度然后overflow:scroll放在上面时,某些用户可能会很方便地阅读线程,可以扩展上述方法来实现上述用例。

  public autoGrowShrinkToCertainHeight() {
    const textArea = this.textArea.nativeElement;
    if (textArea.scrollHeight > 77) {
      textArea.style.overflow = 'auto';
      return;
    }
    else {
      textArea.style.overflow = 'hidden';
      textArea.style.height = '0px';
      textArea.style.height = textArea.scrollHeight + 'px';
    }
  }

这里的一些答案没有考虑填充。

假设您不想通过maxHeight,这对我有用:

    // obviously requires jQuery

    // element is the textarea DOM node

    var $el = $(element);
    // inner height is height + padding
    // outerHeight includes border (and possibly margins too?)
    var padding = $el.innerHeight() - $el.height();
    var originalHeight = $el.height();

    // XXX: Don't leave this hardcoded
    var maxHeight = 300;

    var adjust = function() {
        // reset it to the original height so that scrollHeight makes sense
        $el.height(originalHeight);

        // this is the desired height (adjusted to content size)
        var height = element.scrollHeight - padding;

        // If you don't want a maxHeight, you can ignore this
        height = Math.min(height, maxHeight);

        // Set the height to the new adjusted height
        $el.height(height);
    }

    // The input event only works on modern browsers
    element.addEventListener('input', adjust);

一个更简单,更干净的方法是:

// adjust height of textarea.auto-height
$(document).on( 'keyup', 'textarea.auto-height', function (e){
    $(this).css('height', 'auto' ); // you can have this here or declared in CSS instead
    $(this).height( this.scrollHeight );
}).keyup();

//和CSS

textarea.auto-height {
    resize: vertical;
    max-height: 600px; /* set as you need it */
    height: auto;      /* can be set here of in JS */
    overflow-y: auto;
    word-wrap:break-word
}

所需要做的就是将.auto-height添加textarea您要定位的任何类中

经过FF,Chrome和Safari的测试。让我知道这是否因任何原因对您不起作用。但是,这是我发现此方法最干净,最简单的方法。而且效果很好!:D

此代码适用于粘贴,也可以选择删除。

onKeyPressTextMessage = function(){
			var textArea = event.currentTarget;
    	textArea.style.height = 'auto';
    	textArea.style.height = textArea.scrollHeight + 'px';
};
<textarea onkeyup="onKeyPressTextMessage(event)" name="welcomeContentTmpl" id="welcomeContent" onblur="onblurWelcomeTitle(event)" rows="2" cols="40" maxlength="320"></textarea>

这是JSFiddle

我建议从http://javierjulio.github.io/textarea-autosize获取JavaScript库

根据评论,在插件用法上添加示例代码块:

<textarea class="js-auto-size" rows="1"></textarea>

<script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
<script src="jquery.textarea_autosize.min.js"></script>
<script>
$('textarea.js-auto-size').textareaAutoSize();
</script>

所需的最低CSS:

textarea {
  box-sizing: border-box;
  max-height: 160px; // optional but recommended
  min-height: 38px;
  overflow-x: hidden; // for Firefox (issue #5)
}

使用qQuery的MakeTextAreaResisable

function MakeTextAreaResisable(id) {
    var o = $(id);
    o.css("overflow-y", "hidden");

    function ResizeTextArea() {
        o.height('auto');
        o.height(o[0].scrollHeight);
    }

    o.on('change', function (e) {
        ResizeTextArea();
    });

    o.on('cut paste drop keydown', function (e) {
        window.setTimeout(ResizeTextArea, 0);
    });

    o.focus();
    o.select();
    ResizeTextArea();
}

答案似乎都不起作用。但这对我有用https
//coderwall.com/p/imkqoq/resize-textarea-to-fit-content

$('#content').on( 'change keyup keydown paste cut', 'textarea', function (){
    $(this).height(0).height(this.scrollHeight);
}).find( 'textarea' ).change();

我的实现非常简单,计算输入中的行数(最少2行以表明这是一个文本区域):

textarea.rows = Math.max(2, textarea.value.split("\n").length) // # oninput

带有激励的完整工作示例:https : //jsbin.com/kajosolini/1/edit?html ,js, output

(例如,这适用于浏览器的手动调整大小手柄)

接受的答案工作正常。但这是用于此简单功能的大量代码。下面的代码将解决问题。

   $(document).on("keypress", "textarea", function (e) {
    var height = $(this).css("height");
    var iScrollHeight = $(this).prop("scrollHeight");
    $(this).css('height',iScrollHeight);
    });

这是我将MVC HTML Helper用于TextArea时所做的。我有很多textarea元素,因此必须使用Model Id区分它们。

 @Html.TextAreaFor(m => m.Text, 2, 1, new { id = "text" + Model.Id, onkeyup = "resizeTextBox(" + Model.Id + ");" })

并在脚本中添加了以下内容:

   function resizeTextBox(ID) {            
        var text = document.getElementById('text' + ID);
        text.style.height = 'auto';
        text.style.height = text.scrollHeight + 'px';            
    }

我已经在IE10和Firefox23上进行了测试

您可以使用以下代码:

咖啡:

jQuery.fn.extend autoHeightTextarea: ->
  autoHeightTextarea_ = (element) ->
    jQuery(element).css(
      'height': 'auto'
      'overflow-y': 'hidden').height element.scrollHeight

  @each ->
    autoHeightTextarea_(@).on 'input', ->
      autoHeightTextarea_ @

$('textarea_class_or_id`').autoHeightTextarea()

Java脚本

jQuery.fn.extend({
  autoHeightTextarea: function() {
    var autoHeightTextarea_;
    autoHeightTextarea_ = function(element) {
      return jQuery(element).css({
        'height': 'auto',
        'overflow-y': 'hidden'
      }).height(element.scrollHeight);
    };
    return this.each(function() {
      return autoHeightTextarea_(this).on('input', function() {
        return autoHeightTextarea_(this);
      });
    });
  }
});

$('textarea_class_or_id`').autoHeightTextarea();
本文地址:http://javascript.askforanswer.com/chuangjianjuyouzidongdiaozhengdaxiaodewenbenquyu.html
文章标签: ,   ,   ,   ,  
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!