.focus () проблема с JQUERY MOBILE? - PullRequest
Новая
       44

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

10 голосов
/ 24 августа 2011

Я думаю, что событие focus не работает с JQuery mobile: вот мой код? что ты об этом думаешь и благодаришь.
(когда я удаляю звонок в библиотеку 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>

Ответы [ 6 ]

9 голосов
/ 31 августа 2011
Событие

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

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

Если это все еще не работает (был такой случай), оберните код, который вызывает фокусировку во время ожидания (да, это взломать :)) 

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

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

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

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

2 голосов
/ 25 октября 2013

Если вы используете 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

1 голос
/ 24 июля 2015

попробуйте это, он работает на моем мобильном 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();
            });
0 голосов
/ 26 января 2017

На вашем UIWebView установите для клавиатурыDisplayRequiresUserAction значение NO.

Если вы используете Cordova или Phonegap, в вашем config.xml добавьте следующее: 

<preference name="KeyboardDisplayRequiresUserAction" value="false"/>
0 голосов
/ 08 марта 2016

решено 

$( document ).on( "pageshow", "#casino", function( event ) {
    var txtBox=document.getElementById("SearchUsuario");
    txtBox.tabindex=0; //this do the trick
    txtBox.value="";
    txtBox.focus();
});
0 голосов
/ 29 сентября 2015

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

При нажатии на ссылку «Продажи» акцент смещается на отказ от продаж.Здесь в этом случае смещение должно быть упомянуто согласно вашему требованию.

<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);
}
...