Верх страницы
Обложка к записи jQuery сниппеты: увеличение поля ввода при получении фокуса
Время для прочтения: 0 мин. 1 сек.

jQuery сниппеты: увеличение поля ввода при получении фокуса

Представим себе ситуацию, когда у нас есть красивая форма фиксированной ширины. В форме есть тег textarea, который вмещает в себя, допустим, 1000 символов. По умолчанию, видна лишь часть текста в этом теге. Но нам хочется просмотреть весь этот текст. Добавим немного jQuery, заставив это поле увеличиваться по ширине при получении фокуса.

Допустим, у нас на странице есть элемент textarea:

<form>
	<textarea></textarea>
</form>

Изначально этот элемент имеет размеры 250px x 125px

textarea {
    width: 250px;
    height: 125px;
}

Чтобы заставить это поле ввода при получении фокуса изменить свою ширину, используем простенький сниппет:

$(function() {
    $("textarea").focus(function(){
        $(this).width(500);
    }).blur(function(){
        $(this).width(250);
    });
});

«Причесав» немного наш сниппет, добавив анимации, получим плавное увеличение ширины:

$(function() {
    $("textarea").focus(function(){
        $(this).animate({ width:"500px"}, 1000);
    }).blur(function(){
        $(this).animate({ width:"250px"}, 500);
    });
});

Живой пример

1

Автор: Кобзарёв Михаил

Русский разработчик с 20-ти летним стажем. Работаю с PHP, ООП, JavaScript, Git, WordPress, Битрикс, Joomla, Drupal, Opencart, DLE, Laravel, Moonshine, SuiteCRM.

Оптимизирую сайты под Google Page Speed, настраиваю импорты для больших магазинов на WooCommerce + WP All Import. Пишу плагины на заказ. Все мои услуги.

Веду блог о разработке, дайджест в телеграмме и в ВК.

Вы всегда можете нанять меня.

Комментарии
Подписаться
Уведомить о
guest

14 комментариев
Межтекстовые Отзывы
Посмотреть все комментарии
Иван
13 лет назад

Привет! Было бы просто замечательно, если бы добавляли демки. Ведь всегда приятно сразу увидеть конечный результат в действии.

Нет,я не лентяй=)

Max
Max
12 лет назад

Спасибо! Как раз то что искал. Но только почему то у меня не работает в мозиле, при фокусе пропадает плейсхолдер, поле не увеличивается и писать в него нельзя =( Может знаете в чем проблема?

Александр
10 лет назад

Приветствую.
Искал подобное решение и пришел к вам. Только мне нужно было, чтобы это увеличение было справа налево, так как поле поиска в правом верхнем углу.

Нашел решение здесь http://thefinishedbox.com/freebies/scripts/jquery-animated-search/.
Работает в ie8, moz 21, opera 12.11, chrome 27
в старших версиях не проверял.

Удачи!

Алексей
Алексей
10 лет назад

Привет, Михаил, отличный сниппет, только у меня произошла такая же проблема как у предыдущего комментатора. Можете подсказать что нужно добавить в ваш скрипт чтобы ширина изменялась справа налево? А то у меня сейчас вместе с анимацией текстового элемента, кнопка сабмит двигается..

Алексей
Алексей
10 лет назад
Ответить на  Кобзарёв Михаил

Смотрел, но я не слишком в теме, чтобы понять что именно нужно изменить. Там не не простой скрипт, если бы знать что и где искать

Алексей
Алексей
10 лет назад
Ответить на  Кобзарёв Михаил

Да, всё так. Спасибо

Горожанин
Горожанин
9 лет назад

textarea:focus {
width: 500px;
}
И никаких сниппетов

mihdan
9 лет назад
Ответить на  Горожанин

2010 год на дворе. О CSS3 браузеры еще не знали, чтобы делать анимацию красивую

mihdan
9 лет назад
Ответить на  Горожанин

:focus в input:text для ie6 ))) я вас умоляю)))

Евгений
Евгений
1 год назад

Спасибо!

Предыдущая запись
Следующая запись

Давайте дружить
в Telegram

Авторский блог вашего покорного слуги в Telegram про web, программирование, алгоритмы, инструменты разработчика, WordPress, Joomla, Opencart, Laravel, Moonshine, фильмы и сериалы