Динамически изменяющееся поле ввода текста

Подключение:

Подключаем скрипт плагина jquery.auto-grow-input.js или jquery.auto-grow-input.min.js и назначаем для любого поля ввода текста:

$(selector).autoGrowInput({key1: value1, key2: value2});

1	$(selector).autoGrowInput({key1: value1, key2: value2});

Настройки по умолчанию:

maxWidth	500	Максимальная ширина поля ввода. Это значение должно быть целым числом или функцией, которая возвращает целое число.
minWidth	20	Минимальная ширина поля ввода.
comfortZone	0	Дополнительный пробел после последнего символа в поле ввода. По умолчанию используется ширина одного символа.

Пример:

$('#my-input').autoGrowInput({ minWidth: 100, maxWidth: 600, comfortZone: 40 });

1	$('#my-input').autoGrowInput({ minWidth: 100, maxWidth: 600, comfortZone: 40 });

Плагин может запускаться вручную со следующим событием (полезно в адаптивном дизайне, когда на поле ввода влияет изменение размера экрана):

$('#my-input').trigger('autogrow');

1	$('#my-input').trigger('autogrow');

Адаптивный вариант будет выглядеть так:

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

</div>

$('#grow-input').autoGrowInput({ minWidth: 200, maxWidth: function(){ return $('.grow-input-container').width()-22; }, comfortZone: 20 });

$(window).resize(function(){ $('#grow-input').trigger('autogrow'); });

</script>

Результат:

Дополнительную информацию можно найти на страничке автора

Подключение:

Настройки по умолчанию:

Пример:

Результат:

Смотрите также:

Добавить комментарий: