Верх страницы
Обложка к записи 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

ВКонтакте
Одноклассники
Linkedin
Telegram
WhatsApp

Комментарии
Подписаться
Уведомить о
guest
13 комментариев
Старые
Новые Популярные
Межтекстовые Отзывы
Посмотреть все комментарии
Иван
10 лет назад

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

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

Max
Max
9 лет назад

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

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

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

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

Удачи!

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

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

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

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

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

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

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

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

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

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

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

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