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

Источник: https://www.kobzarev.com/jquery/jquery-snippets-enlarge-input-fields-on-focus/

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

Суровый русский тимлид. Жил в Магадане, в офисе московских веб студий и в Тульской деревне. Виртуозно знает WordPress, PHP, ООП, Vue.js и вот это вот все. Делает крутые высоконагруженные сайты, поэтому уже почти захватил весь рынок WordPress разработки в России. Не дает никому делать сайты без спроса. Ведет блог о разработке, дайджест в телеграмме и в ВК. Любит сиськи, баню и радиоэлектронику. 100% патриот (но это не точно). Тролль 542 уровня. Ездит в отпуск раз в 5 лет.

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

%d такие блоггеры, как: