jQuery: фокусировка на текстовом поле с помощью той же кнопки

Question

jQuery: фокусировка на текстовом поле с помощью той же кнопки

0

(мой первый раз, отправляя сюда, надеюсь, что все в порядке!)

В настоящее время у меня есть скрытый div, содержащий поле поиска, и у него есть кнопка, которая перемещает div вниз, чтобы сделать его видимым, и когда щелкнуть снова, слайд делит вверх, чтобы снова скрыть его от прицела.

Я также настроил его так, чтобы при нажатии кнопки было выбрано текстовое поле поиска (поэтому посетителю не нужно его кликать - они могут просто вводить и удалять ввод для поиска, сохраняя больше кликов).

Однако, когда div исчезает, текстовое поле повторно выбирается. Это не проблема в Chrome, но в Safari даже после того, как div был скрыт, попадание в него все еще работает и запускает поиск (однако текст не может быть введен, однако). Это также проблема на мобильном телефоне, поскольку клавиатура возвращается, хотя там негде набирать.

Есть ли способ "переключить", выбрано ли текстовое поле, аналогично появлению/исчезновению? Или для этого просто произойдет, когда появится div? Я новичок в jQuery, поэтому любая помощь оценивается.

jQuery(function ($) {
$(document).ready(function() {
    $('#showsearch').click(function() {
            $('.search-menu').slideToggle("fast");
    });
});             
});

jQuery(function ($) {
$(document).ready(function() {
    $('#showsearch').click(function() {
            $(".search-field").focus()
    });
});
});

(Где #showsearch - кнопка,.search-menu - это div, а поле.search - текстовое поле)

Заранее спасибо!

vaatikaiba 20 янв. 2014, в 18:18

Источник

Теги:

jquery

button

focus

toggle

2 ответа

0

Вместо этого вы можете использовать следующий фрагмент:

jQuery(function ($) { //this is already fired on document ready, no need other ready handler
    $('#showsearch').click(function() {
        $('.search-menu').slideToggle("fast", function(){
            if($(this).is(':visible'))
               $(this).find(".search-field").focus(); //that supposes .search-field is wrapped inside .search-menu
        });
    });       
});

A. Wolff 20 янв. 2014, в 13:53

0

Это отлично работает для настольного Safari. Однако клавиатура iOS теперь не открывается при открытии div - это нормально? Проверка 'visible' не совместима с браузером iOS?
vaatikaiba 20 янв. 2014, в 17:22

Ещё вопросы

Это отлично работает для настольного Safari. Однако клавиатура iOS теперь не открывается при открытии div - это нормально? Проверка 'visible' не совместима с браузером iOS?

Yuriy Kvartsyanyy · Accepted Answer · 2014-01-20T15-28-00.000Z

Попробуйте это, виртуальная клавиатура на мобильном сафари должна появиться

jQuery(function ($) { 
    $('#showsearch').click(function() {
        var searchMenu = $('.search-menu'),
            isHidden = searchMenu.is(':hidden');

        searchMenu.slideToggle('fast');

        if (isHidden){
            $('.search-field').focus();
        }
    });       
});

Это сработало отлично, спасибо! Что мешало iOS-клавиатуре появиться с другим решением?
@vaatikaiba Фокус должен быть непосредственно внутри кода, вызванного действием пользователя (обработчик щелчка). Если фокус находится внутри обратного вызова, setTimeout и т. Д. Клавиатура не будет отображаться.