@b_efimenko

Как сделать условие для input?

В общем по наведениию на блок он в начале 20px, он увеличивается до 400px, соответственно там стает видна форма.
При уходе курсора с этого блока он должен обратно сплюснутся, но только в том случае если на форме нету фокуса или там ничего не написано

$('.input-wraper').hover(function(){
        
            
        $('.input-wraper').animate({
            'width':'400px'
        },{duration:500})
    },
    function(){
      if ($('.input-wraper input').focus() && $('.input-wraper input').val() !== '') {$('.input-wraper').css('width','400px')}
        else{
          $('.input-wraper').animate({
            'width':'20px'
        },{duration:500})
        }
      
    })


<div class="input-wraper">
									
									<form>
										<input type="text" placeholder="Найти статью в блоге">
									</form>
								</div>


Но не работает условие с фокусом, как быть?
  • Вопрос задан
  • 2641 просмотр
Пригласить эксперта
Ответы на вопрос 2
AlexanderTsymbal
@AlexanderTsymbal
tsymbal.su
а почему не сделать это с помощью CSS? c focus в jquery проблемы. Не помню какие, но что-то тоже пол дня, помню, нагугливал, так ничего путевого не нагуглил.

input {width: 20px;}
input:hover, input:focus {width: 40px;}


Или вам важна поддержка старых браузеров? Думаю, ей можно пожертвовать ради упрощения кода в несколько раз.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы