Создание текстовой области с автоматическим изменением размера - PullRequest
Новая
       85

Создание текстовой области с автоматическим изменением размера

309 голосов
/ 18 января 2009

Был другой поток об этом , который я пробовал. Но есть одна проблема: 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 )
    };
}

Ответы [ 38 ]

0 голосов
/ 10 мая 2012

Я могу установить размер TextArea в IE9 и Chrome с помощью следующей функции jQuery. Он привязывается к объектам textarea из селектора, определенного в функции $ (document) .ready (). 

function autoResize(obj, size) {
    obj.keyup(function () {
        if ($(this).val().length > size-1) {
            $(this).val( function() {
                $(this).height(function() {
                    return this.scrollHeight + 13;
                });
                alert('The maximum comment length is '+size+' characters.');
                return $(this).val().substring(0, size-1);
            });
        }
        $(this).height(function() {
            if  ($(this).val() == '') {
                return 15;
            } else {
                $(this).height(15);
                return ($(this).attr('scrollHeight')-2);
            }
        });
    }).keyup();
}

В моей функции $ (document) .ready () у меня есть следующий вызов для всех моих вызовов textarea на этой странице. 

$('textarea').each( function() {
        autoResize($(this), 250);
});

Где 250 - ограничение на количество символов в моей текстовой области. Это увеличится настолько, насколько позволит размер текста (в зависимости от количества символов и размера шрифта). Это также уменьшит размер вашей текстовой области, когда вы удаляете символы из текстовой области или если пользователь изначально вставляет слишком много текста.

0 голосов
/ 17 февраля 2011 
$('textarea').bind('keyup change', function() {
    var $this = $(this), $offset = this.offsetHeight;
    $offset > $this.height() && $offset < 300 ?
        $this.css('height ', $offset)
            .attr('rows', $this.val().split('\n').length)
            .css({'height' : $this.attr('scrollHeight'),'overflow' : 'hidden'}) :
        $this.css('overflow','auto');
});
0 голосов
/ 11 сентября 2013

Вот что я сделал, используя 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

0 голосов
/ 01 марта 2017

Я рекомендую библиотеку javascript от http://javierjulio.github.io/textarea-autosize.

В комментариях добавить пример кодового блока по использованию плагина: 

<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)
}
0 голосов
/ 02 июля 2016

Решение jQuery состоит в том, чтобы установить высоту текстовой области в 'auto', проверить scrollHeight и затем адаптировать высоту текстовой области к этому каждый раз, когда текстовая область изменяется ( JSFiddle ): 

$('textarea').on( 'input', function(){
    $(this).height( 'auto' ).height( this.scrollHeight );
});

Если вы динамически добавляете текстовые области (через AJAX или что-то еще), вы можете добавить это в свой $ (документ) .ready, чтобы убедиться, что все текстовые области с классом 'autoheight' находятся на той же высоте, что и их содержимое: 

$(document).on( 'input', 'textarea.autoheight', function() {
    $(this).height( 'auto' ).height( this.scrollHeight );
});

Протестировано и работает в Chrome, Firefox, Opera и IE. Также поддерживает вырезать и вставить, длинные слова и т. Д.

0 голосов
/ 08 июня 2015

Вы можете использовать этот код:

Coffescript: 

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()

Javascript 

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();
0 голосов
/ 14 марта 2017

Вы можете использовать этот фрагмент кода, чтобы вычислить количество строк, необходимое для текстовой области: 

textarea.rows = 1;
    if (textarea.scrollHeight > textarea.clientHeight)
      textarea.rows = textarea.scrollHeight / textarea.clientHeight;

Вычислите его для событий input и window:resize, чтобы получить эффект автоматического изменения размера. Пример на угловом:

Код шаблона: 

<textarea rows="1" reAutoWrap></textarea>

авто-wrap.directive.ts 

import { Directive, ElementRef, HostListener } from '@angular/core';

@Directive({
  selector: 'textarea[reAutoWrap]',
})
export class AutoWrapDirective {

  private readonly textarea: HTMLTextAreaElement;

  constructor(el: ElementRef) {
    this.textarea = el.nativeElement;
  }

  @HostListener('input') onInput() {
    this.resize();
  }

  @HostListener('window:resize') onChange() {
    this.resize();
  }

  private resize() {
    this.textarea.rows = 1;
    if (this.textarea.scrollHeight > this.textarea.clientHeight)
      this.textarea.rows = this.textarea.scrollHeight / this.textarea.clientHeight;
  }

}
0 голосов
/ 29 июня 2015

Для тех, кто хочет, чтобы текстовая область автоматически изменялась как по ширине, так и по высоте:

HTML: 

<textarea class='textbox'></textarea>
<div>
  <span class='tmp_textbox'></span>
</div>

CSS: 

.textbox,
.tmp_textbox {
  font-family: 'Arial';
  font-size: 12px;
  resize: none;
  overflow:hidden;
}

.tmp_textbox {
  display: none;
}

JQuery: 

$(function(){
  //alert($('.textbox').css('padding'))
  $('.textbox').on('keyup change', checkSize)
  $('.textbox').trigger('keyup')

  function checkSize(){
    var str = $(this).val().replace(/\r?\n/g, '<br/>');
    $('.tmp_textbox').html( str )
    console.log($(this).val())

    var strArr = str.split('<br/>')
    var row = strArr.length
    $('.textbox').attr('rows', row)
    $('.textbox').width( $('.tmp_textbox').width() + parseInt($('.textbox').css('padding')) * 2 + 10 )
  }
})

Codepen:

http://codepen.io/anon/pen/yNpvJJ

Приветствия

Страница:
...