Onclick Expand Ширина текстового поля

Я хочу использовать jQuery для расширения ширины входного текстового поля во время onclick.

Например, если вход имеет ширину по умолчанию 100 пикселей, когда пользователь нажимает на нее для ввода, она будет расширяться до 150 пикселей в ширину.

Можно ли это сделать?

Спасибо.

Ответ 1

Здесь обновленный пример на jsfiddle, который анимируется, и возвращается к размеру по умолчанию при размытии.

Для справки см. jQuery Animate docs.

Ответ 2

Я хотел бы использовать пример @wsanville, удалив дополнительный шаг по сохранению исходного размера. Анимация также принимает строковые значения, такие как '+ = 50' или '- = 50' для увеличения/уменьшения ширины.

Смотрите в действии на jsfiddle

$('#box').focus(function()
{
    $(this).animate({ width: '+=50' }, 'slow');
}).blur(function()
{
    $(this).animate({ width: '-=50' }, 'slow');
});

Ответ 3

Вот рабочий пример, основанный на примере @wsanville с запрошенной задержкой. (Примечание. Я также добавил эффект, чтобы вернуть его при потере фокуса, вы можете легко удалить его)

Рабочий пример

** отредактировал размер текстового поля

Ответ 4

Я знаю, что это немного поздно для вечеринки, но если кто-то хочет чистое решение CSS, которое использует атрибут: focus.

#textbox {
  width:100px;
  transition: 0.5s;
}

#textbox:focus {
  width:150px;
  transition: 0.5s;
}

Он мой jsFiddle:

https://jsfiddle.net/qo95uquv/

Tom

Ответ 5

<input type="text" id="tbText" size="30px"/>    

<script type="text/javascript">
    $(document).ready(function() {
        $('#tbText').focus(function() {
            $('#tbText').css("width", "250px");
        });
        $('#tbText').blur(function() {
            $('#tbText').css("width", "150px");
        });
    });
</script>

Ответ 6

уверен. Допустим, у вас есть

<input id="mytextbox" />

вы можете сделать

$("#mytextbox").focus(function(){
   $(this).width(150)
});