Подключение:
Подключаем скрипт плагина jquery.auto-grow-input.js или jquery.auto-grow-input.min.js и назначаем для любого поля ввода текста:
1 |
$(selector).autoGrowInput({key1: value1, key2: value2}); |
Настройки по умолчанию:
maxWidth | 500 | Максимальная ширина поля ввода. Это значение должно быть целым числом или функцией, которая возвращает целое число. |
minWidth | 20 | Минимальная ширина поля ввода. |
comfortZone | 0 | Дополнительный пробел после последнего символа в поле ввода. По умолчанию используется ширина одного символа. |
Пример:
1 |
$('#my-input').autoGrowInput({ minWidth: 100, maxWidth: 600, comfortZone: 40 }); |
Плагин может запускаться вручную со следующим событием (полезно в адаптивном дизайне, когда на поле ввода влияет изменение размера экрана):
1 |
$('#my-input').trigger('autogrow'); |
Адаптивный вариант будет выглядеть так:
1 2 3 4 5 6 7 8 |
<div class="grow-input-container"> <input id="grow-input" type="text" placeholder="Введите текст"> </div> <script src="jquery.auto-grow-input.js"></script> <script> $('#grow-input').autoGrowInput({ minWidth: 200, maxWidth: function(){ return $('.grow-input-container').width()-22; }, comfortZone: 20 }); $(window).resize(function(){ $('#grow-input').trigger('autogrow'); }); </script> |
Результат:
Дополнительную информацию можно найти на страничке автора
Добавить комментарий: