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

Пример формы:


<form class="search-form">
    <input id="query" type="text" placeholder="Поиск..." />
    <button>Искать</button>
</form>

Скрипт который будет менять ширину поля:


<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

<script>
    $(function () {
        $("#query").focus(function () {
            $(this).animate({width: "500px"}, 1000);
        }).blur(function () {
            $(this).animate({width: "250px"}, 500);
        });
    });
</script>

Добавим немного CSS:

<style>
    #query{
        height: 30px;
        width: 250px;
        padding: 2px 7px;
        font-size: 14px;
    }
    .search-form {
        position: absolute;
        top: 0;
        right: 0;  
    }
</style>