.focus () проблема с jQuery MOBILE?

Я думаю, что событие focus не работает с jQuery mobile: вот мой код? что вы думаете об этом и спасибо u.
(когда я удаляю вызов в библиотеку jQuery mobile, он работает)

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b2/jquery.mobile-1.0b2.min.css" />
        <script src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
        <script src="http://code.jquery.com/mobile/1.0b2/jquery.mobile-1.0b2.min.js"></script>
    </head>
    <script type="text/javascript">
        $(document).ready(function() {
            $('#acceuil').live('pagecreate', function(event) {
                $('#declencher').click(function() {
                    $('#cache').focus();
                });
                $('#declencher').trigger('click');
            });
        });
    </script>
    <body>
        <div data-role="page" id ="acceuil" >
            <div data-role="header" data-theme="a" ><h3>aaa</h3></div>
            <div data-role="content">
                <input id="cache" type="input">    
                <input type="button" id="declencher" value="declencher">
            </div><!-- content-->
            <div data-role="footer" data-theme="a" data-position="fixed"><h3> Footer </h3></div>
        </div>
    </body>

</html>
10
jquery jquery-mobile jquery-plugins jquery-selectors jquery-ui

6 ответов

pagecreate событие срабатывает до того, как JQM делает некоторые изменения в DOM, поэтому я полагаю, что фокус потерян.

попробуйте переключиться на pageshow, тем более, что вы хотите получить фокус каждый раз, пользователь попадает на страницу.

если он все еще не работает (был такой случай) оберните код, который запускает фокус в тайм-аут (да, это хак:))

setTimeout(function(){
 $('#cache').focus();
},0);

это взлом, но это не зависит от ожидания временного интервала. setTimeout() добавлена функция перевода очередь потока (которая запускает javascript и рендеринг страниц в браузере) после заданного времени. Поэтому в этом случае функция добавляется мгновенно, поэтому она запускается после завершения текущего потока кода javascript. Таким образом, это способ заставить некоторый код работать сразу после завершения обработчика событий. Так что это не так банально, как можно подумать. Я называю это взломом, потому что он использует знания о том, как работает браузер, и он скрывает поток выполнения кода.

Я рекомендую прочитать о том, как выполнение javascript и рисование страниц обрабатываются одной и той же очередью в одном потоке. Всем, кто работает с более чем 20 строками javascript.

Я совершенно уверен, что есть только одно лучшее решение - исправить его в самой jQuery Mobile framework.

9

Если вы используете HTML5 затем используйте атрибут автофокусировки.

  <body>
    <div data-role="page" id ="acceuil" >
        <div data-role="header" data-theme="a" ><h3>aaa</h3></div>
        <div data-role="content">
            <input id="cache" type="input" autofocus>    
            <input type="button" id="declencher" value="declencher">
        </div><!-- content-->
        <div data-role="footer" data-theme="a" data-position="fixed"><h3> Footer       </h3></div>
    </div>
</body>

см. автофокус атрибут HTML5

2

попробуйте этот, он работает на моем мобильном Safari, Chrome, а также настольном браузере

// div is some selected element
            var f = function(event) {
                $timeout(function() { // angular way, setTimeout is OK
                    input[0].focus();
                    event.preventDefault();
                })
            };

            var mobile = false;
            div.on('click', function(event) {
                if(mobile) return;
                f(event);
            });

            div.on('touchstart', function(event) {
                mobile = true;
                f(event);
            });

            div.on('touchend', function(event) {
                event.preventDefault();
                event.stopPropagation();
            });
1

в UIWebView установите для параметра keyboardDisplayRequiresUserAction значение NO.

Если вы используете использование Cordova или Phonegap, в вашей конфигурации.xml добавить следующее:

<preference name="KeyboardDisplayRequiresUserAction" value="false"/>
0

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

при нажатии на ссылку продажи фокус переместится на отказ от продажи, здесь в этом случае смещение должно быть упомянуто в соответствии с вашим требованием. 

<div class="sales">
    <a href="#sales-disclaimer" onclick="setFocusToSales()">
        Sales
    </a>
</div>

<div id='sales-disclaimer'>
    some text here........
</div>

/функция Javascript/

function setFocusToSales()
{
    $('html, body').animate({
        scrollTop: $('#sales-disclaimer').offset().top
    }, 1000);
}
-1

решить

$( document ).on( "pageshow", "#casino", function( event ) {
    var txtBox=document.getElementById("SearchUsuario");
    txtBox.tabindex=0; //this do the trick
    txtBox.value="";
    txtBox.focus();
});
-1