Растяжка увеличивает за содержание текстовой

Веб неисчерпаемый запас минеральных советы и идеи. Интернет, по определению, среда, где каждый день contuna тестирования рождаются новые идеи, некоторые другие гении, просто любопытно и интересно.

С точки зрения веб-дизайна, один из "спецэффектами", что я предпочитаю это динамическое управление размером с большой текстовый контент изменения, введенные пользователем. В двух словах: больше контента вы пишете, и тем больше становится текстового поля. С психологической точки зрения это приглашение продолжать писать эквивалент говорят: "Эй вы хотите написать, а также, нет места".

В этой статье я предлагаю простую функцию JavaScript, чтобы справиться с этим хороший эффект. Функции в вопросе ничего не делает, но продлить текстовой когда содержимое превышает его естественные способности (избегая, по сути, появление уныние вертикальная черта). Вот код:

 moreWords функции (идентификатор, MaxHeight) {



  



 / / Создаем переменную для доступа к стилю свойств текстового поля



  



 ID: document.getElementById (ID);



  

  



 / / Если я не могу выйти, ничего не делая



  



 если возвращение (txtarea!);



  

  



 / / Создаем переменную, которая изначально, если текущая высота текстовой



  



 переменная = newHeight txtarea.clientHeight;



  

  



 / / Если высота не был установлен или это больше, чем текущие ...



  



 если (MaxHeight | | MaxHeight> newHeight) {



    

    



 / / Переопределение значения выявления newHeight большую высоту контента (scrollHeight) и его текущее значение



    



 newHeight = Math.max (txtarea.scrollHeight, newHeight);



    

    



 / / Если высота была установлена ​​..



    



 если (MaxHeight)



      



 / / Переопределение значения newHeight выявление меньше максимальной высоты (MaxHeight) и его текущее значение



      



 newHeight = Math.min (MaxHeight, newHeight);





    



 / / Если расчетная высота (newHeight) больше, чем текущий текстовой



    



 / / Сделайте изменения и удлинить текстовой



    



 если (newHeight> txtarea.clientHeight) {



      



 txtarea.style.height newHeight = + "пикселей";



      



 txtarea.style.overflow = "скрытый";



    



 }



  



 }



  



 / / Если максимальная высота достигает показать полосу прокрутки



  



 txtarea.style.overflow = "авто";

  

  



 }

   





 }

Функция принимает два параметра, обязательных (ID текстовой, на котором для применения эффекта) и дополнительный (любая высота в пикселях).

О различных этапах используется для создания функции Я считаю, есть немного, чтобы добавить в комментарии уже в коде.

Использование функции очень прост: наша текстовая OnKeyUp событие запускает функцию, которая ничего не делает, но пересчитать, для каждой нажатой клавиши, если высота подходит для размещенные на:

 



 <textarea onkeyup="moreWords(this)"> </ TEXTAREA>

 

Рабочий пример предлагаемого кода можно посмотреть на этой странице .

Единственное ограничение этой функции является невозможность договора, если пользователь удаляет текст ... в этом случае, текстовую еще старые уменьшения размера, потому что наш код предназначен исключительно для расширения пространства, а не для ее сокращения. Однако, если вы хотите, вы можете добавить эту функцию, добавив несколько строк кода.