Представим себе ситуацию, когда у нас есть красивая форма фиксированной ширины. В форме есть тег 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/
